Polymer - Google Youtube

更新于 2025/1/30 0:07:17

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

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

所有嵌入式播放器参数均受google-youtube支持，您可以将每个参数设置为google-youtube上的属性。

下表显示了自定义属性。

Sr.No.	自定义属性 &描述	默认
1	--google-youtube-container 这是一个用于容器 div 的混合。	{
2	--google-youtube-thumbnail 这是一个用于视频缩略图的混合。	{
3	--google-youtube-iframe 这是一个用于嵌入式框架的混合。	{

示例

要使用 google-youtube 元素，请在命令提示符中导航到您的项目文件夹并使用以下命令。

bower install PolymerElements/google-youtube --save

上述命令在 bower_components 文件夹中安装 google-youtube 元素。接下来，使用以下命令在您的 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>