Polimero - Google Youtube

<google-youtube> è un elemento contenente un video player di YouTube.

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

Tutti i parametri del player incorporato sono supportati dagoogle-youtube ognuno dei quali può essere impostato come attributo google-youtube.

La tabella seguente mostra le proprietà personalizzate.

Sr.No. Proprietà personalizzata e descrizione Predefinito
1 --google-youtube-container

È un mixin da utilizzare per un container div.

 {}
2 --google-youtube-thumbnail

È un mixin da utilizzare per una miniatura del video.

 {}
3 --google-youtube-iframe

È un mixin da utilizzare per una cornice incorporata.

 {}

Esempio

Per utilizzare l'elemento google-youtube, vai alla cartella del tuo progetto nel prompt dei comandi e usa il seguente comando.

bower install PolymerElements/google-youtube --save

Il comando precedente installa l'elemento google-youtube nella cartella bower_components. Successivamente, importa il file google-youtube nel tuo index.html utilizzando il seguente comando.

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

L'esempio seguente dimostra l'uso dell'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>

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando.

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.