É possível incorporar vídeos do YouTube diretamente nas páginas do DevSite usando o elemento personalizado <devsite-video>. Todos os vídeos são responsivos e mantêm uma proporção de 16:9 à medida que a largura da janela de visualização muda.
Para incorporar um vídeo do YouTube, adicione um elemento personalizado <devsite-video> à sua página e defina o atributo video-id como o valor do parâmetro de URL v do vídeo.
Por exemplo, para incorporar o vídeo do YouTube "Your First Script - Apps Script Tutorials", disponível em https://www.youtube.com/watch?v=Pgfbl_o9WvM, adicione o seguinte elemento personalizado <devsite-video> à sua página do DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Em seguida, envolva o elemento personalizado <devsite-video> em um elemento <div> cujo atributo class seja definido como um dos valores abaixo:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Padrão
O exemplo a seguir mostra como um vídeo incorporado do YouTube é exibido quando <devsite-video> é envolvido em um elemento <div> cujo atributo class está definido como video-wrapper.
Em telas grandes, o vídeo ocupa 50% da largura da área de conteúdo e flutua à direita de qualquer conteúdo que o precede. Em telas pequenas, o vídeo ocupa 100% da largura da área de conteúdo.
Código
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demonstração
Flutuante à esquerda
O exemplo a seguir mostra como um vídeo incorporado do YouTube é exibido quando <devsite-video> é envolvido em um elemento <div> cujo atributo de classe está definido como video-wrapper-left.
Em telas grandes, o vídeo ocupa 50% da largura da área de conteúdo e flutua à esquerda de qualquer conteúdo que o vídeo precede. Em telas pequenas, o vídeo ocupa 100% da largura da área de conteúdo.
Código
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demonstração
Largura total
O exemplo a seguir mostra como um vídeo incorporado do YouTube é exibido quando <devsite-video> é envolvido em um elemento <div> cujo atributo class está definido como video-wrapper-full-width.
O vídeo ocupa 100% da largura da área de conteúdo e não afeta o layout de nenhum conteúdo que o precede.
Código
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demonstração
Observações
Todos os exemplos de código usam o widget de incorporação do YouTube do DevSite, que rastreia os dados do Google Analytics automaticamente. Use esse widget, exceto em casos especiais em que você não quer coletar estatísticas de uso de um vídeo incorporado. Sem ele, as estatísticas de uso do seu vídeo não serão enviadas ao Google Analytics.