Polymère - Google Youtube

<google-youtube> est un élément contenant un lecteur vidéo YouTube.

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

Tous les paramètres du lecteur intégré sont pris en charge pargoogle-youtube dont chacun peut être défini comme attribut sur google-youtube.

Le tableau suivant présente les propriétés personnalisées.

N ° Sr. Propriété personnalisée et description Défaut
1 --google-youtube-container

C'est un mixin à utiliser pour un conteneur div.

 {}
2 --google-youtube-miniature

C'est un mixin à utiliser pour une vignette vidéo.

 {}
3 --google-youtube-iframe

C'est un mixin à utiliser pour un cadre intégré.

 {}

Exemple

Pour utiliser l'élément google-youtube, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante.

bower install PolymerElements/google-youtube --save

La commande ci-dessus installe l'élément google-youtube dans le dossier bower_components. Ensuite, importez le fichier google-youtube dans votre index.html à l'aide de la commande suivante.

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

L'exemple suivant montre l'utilisation de l'élément 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>

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante.

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.