Polímero - Google Youtube

<google-youtube> é um elemento que contém um player de vídeo do YouTube.

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

Todos os parâmetros do player embutido são suportados porgoogle-youtube cada um dos quais você pode definir como um atributo em google-youtube.

A tabela a seguir mostra as propriedades personalizadas.

Sr. Não.	Propriedade personalizada e descrição	Padrão
1	--google-youtube-container É um mixin a ser usado para um div de contêiner.	{}
2	--google-youtube-thumbnail É um mixin para ser usado em uma miniatura de vídeo.	{}
3	--google-youtube-iframe É um mixin para ser usado em uma moldura embutida.	{}

Exemplo

Para usar o elemento google-youtube, navegue até a pasta do projeto no prompt de comando e use o seguinte comando.

bower install PolymerElements/google-youtube --save

O comando acima instala o elemento google-youtube na pasta bower_components. Em seguida, importe o arquivo google-youtube em seu index.html usando o seguinte comando.

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

O exemplo a seguir demonstra o uso do 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>

Resultado

Para executar o aplicativo, navegue até o diretório do projeto e execute o seguinte comando.

polymer serve

Agora abra o navegador e navegue até http://127.0.0.1:8081/. A seguir será a saída.

polímero_elementos.htm

↰ Previous page