Puedes incorporar videos de YouTube directamente en las páginas de DevSite con el elemento personalizado <devsite-video>. Todos los videos son responsivos y mantienen una relación de aspecto de 16:9 a medida que cambia el ancho de la vista del puerto.
Para incorporar un video de YouTube, agrega un elemento personalizado <devsite-video> a tu página y establece el atributo video-id en el valor del parámetro de URL v del video.
Por ejemplo, para incorporar el video de YouTube “Tu primera secuencia de comandos: Instructivos de Apps Script” que puedes encontrar en https://www.youtube.com/watch?v=Pgfbl_o9WvM, agrega el siguiente elemento personalizado <devsite-video> a tu página de DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Luego, une el elemento personalizado <devsite-video> en un elemento <div> cuyo atributo class esté configurado en uno de los siguientes valores:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Predeterminada
En el siguiente ejemplo, se muestra cómo se muestra un video de YouTube incorporado cuando <devsite-video> se une a un elemento <div> cuyo atributo class se establece en video-wrapper.
En pantallas grandes, el video ocupa el 50% del ancho del área de contenido y flota a la derecha de cualquier contenido al que precede. En pantallas pequeñas, el video ocupa el 100% del ancho del área de contenido.
Código
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demostración
Flotante a la izquierda
En el siguiente ejemplo, se muestra cómo se muestra un video de YouTube incorporado cuando <devsite-video> se une a un elemento <div> cuyo atributo de clase se establece en video-wrapper-left.
En pantallas grandes, el video ocupa el 50% del ancho del área de contenido y flota a la izquierda de cualquier contenido al que precede. En pantallas pequeñas, el video ocupa el 100% del ancho del área de contenido.
Código
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demostración
Ancho total
En el siguiente ejemplo, se muestra cómo se muestra un video de YouTube incorporado cuando <devsite-video> se une a un elemento <div> cuyo atributo class se establece en video-wrapper-full-width.
El video ocupa el 100% del ancho del área de contenido y no afecta el diseño de ningún contenido al que precede.
Código
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demostración
Notas
En todos los ejemplos de código, se usa el widget para incorporar YouTube de DevSite, que realiza un seguimiento de los datos de Google Analytics automáticamente. Usa este widget, excepto en casos especiales en los que no quieras recopilar estadísticas de uso para un video incorporado. Sin él, las estadísticas de uso de tu video no se enviarán a Analytics.