Polímero - Google Youtube

<google-youtube> es un elemento que contiene un reproductor de video de YouTube.

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

Todos los parámetros del reproductor incrustado son compatibles congoogle-youtube cada uno de los cuales puede establecer como un atributo en google-youtube.

La siguiente tabla muestra las propiedades personalizadas.

No Señor.	Propiedad personalizada y descripción	Defecto
1	--google-youtube-container Es un mixin que se utiliza para un contenedor div.	{}
2	--google-youtube-miniatura Es un mixin que se usa para una miniatura de video.	{}
3	--google-youtube-iframe Es un mixin que se utiliza para un marco empotrado.	{}

Ejemplo

Para usar el elemento google-youtube, navegue a la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando.

bower install PolymerElements/google-youtube --save

El comando anterior instala el elemento google-youtube en la carpeta bower_components. A continuación, importe el archivo google-youtube en su index.html con el siguiente comando.

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

El siguiente ejemplo demuestra el uso del elemento 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>

Salida

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando.

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page