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.
