Polymer - Google Youtube

<google-youtube> 是包含 YouTube 视频播放器的元素。

<google-youtube
   video-id = "....."
   height = "300px"
   width = "300px"
   rel = "0"
   start = "2"
   autoplay = "1">
</google-youtube>

google-youtube 支持的所有嵌入式播放器参数，各项参数可作为 google-youtube 中的属性进行设置。

下表显示自定义属性。

序号	自定义属性及说明	默认值
1	--google-youtube-container 适用于容器 div 的混合。	{}
2	--google-youtube-thumbnail 适用于视频缩略图的混合。	{}
3	--google-youtube-iframe 适用于嵌入式框架的混合。	{}

示例

要使用 google-youtube 元素，请导航至命令提示符中的项目文件夹，然后使用以下命令。

bower install PolymerElements/google-youtube --save

以上命令将 google-youtube 元素安装到 bower_components 文件夹。接下来，使用以下命令在 index.html 中导入 google-youtube 文件。

<link rel = "import" href = "/bower_components/google-youtube/google-youtube.html">

以下示例演示了 google-youtube 元素的使用方法。

<!DOCTYPE html>
<html>
   <head>
      <title>google-youtube</title>
      <meta charset = "UTF-8">
      <script src = "bower_components/webcomponentsjs/webcomponents.js"></script>
      <link rel = "import" href = "/bower_components/google-youtube/google-youtube.html">
  
      <style>
         .youtube {
            margin: 10px 10px 10px 5px;
         }
      </style>
   </head>
  
   <body>
      <google-youtube 
         class = "youtube"
         video-id = "MaWcS-10NIw" 
         height = "200px" 
         start = "3"
         width = "400px">
      </google-youtube>
   </body>
</html>

输出

要运行该应用程序，请导航至项目目录并运行以下命令。

polymer serve

现在，打开浏览器，导航至 http://127.0.0.1:8081/。以下是输出。

polymer_elements.htm

打印本页面

上一个

下一个