Polymer - Google Youtube

<google-youtube> is an element containing a YouTube video player.

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

All the embedded player parameters are supported by google-youtube each of which you can set as an attribute on google-youtube.

The following table shows the custom properties.

Sr.No.	Custom property & Description	Default
1	--google-youtube-container It is a mixin to be used for a container div.	{}
2	--google-youtube-thumbnail It is a mixin to be used for a video thumbnail.	{}
3	--google-youtube-iframe It is a mixin to be used for an embedded frame.	{}

Example

To use the google-youtube element, navigate to your project folder in the command prompt and use the following command.

bower install PolymerElements/google-youtube --save

The above command installs the google-youtube element in bower_components folder. Next, import the google-youtube file in your index.html using the following command.

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

Following example demonstrates the use of google-youtube element.

<!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>

Output

To run the application, navigate to your project directory and run the following command.

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

polymer_elements.htm