Podeu inserir vídeos de YouTube directament a les pàgines de DevSite mitjançant l'element personalitzat <devsite-video> . Tots els vídeos responen i mantenen una proporció de 16:9 a mesura que canvia l'amplada de la finestra gràfica.
Per inserir un vídeo de YouTube, afegiu un element personalitzat <devsite-video> a la vostra pàgina i configureu l'atribut video-id al valor del paràmetre v URL del vídeo.
Per exemple, per inserir el vídeo de YouTube "El vostre primer script - Tutorials d'script d'aplicacions" que podeu trobar a https://www.youtube.com/watch?v=Pgfbl_o9WvM , afegiu l'element personalitzat <devsite-video> següent al vostre Pàgina DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
A continuació, emboliqueu l'element personalitzat <devsite-video> en un element <div> l'atribut class del qual està establert en un dels valors següents:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Per defecte
L'exemple següent mostra com es mostra un vídeo de YouTube incrustat quan <devsite-video> s'embolica en un element <div> l'atribut class del qual està definit en video-wrapper .
A les pantalles grans, el vídeo té el 50% de l'amplada de l'àrea de contingut i flota a la dreta de qualsevol contingut que precedeixi el vídeo. A les pantalles petites, el vídeo ocupa el 100% de l'amplada de l'àrea de contingut.
Codi
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demostració
Flota a l'esquerra
L'exemple següent mostra com es mostra un vídeo de YouTube incrustat quan <devsite-video> s'embolica en un element <div> l'atribut de classe del qual està definit en video-wrapper-left .
A les pantalles grans, el vídeo té el 50% de l'amplada de l'àrea de contingut i flota a l'esquerra de qualsevol contingut que precedeixi el vídeo. A les pantalles petites, el vídeo ocupa el 100% de l'amplada de l'àrea de contingut.
Codi
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demostració
Ample complet
L'exemple següent mostra com es mostra un vídeo de YouTube incrustat quan <devsite-video> s'embolica en un element <div> l'atribut class del qual està definit en video-wrapper-full-width .
El vídeo té el 100% de l'amplada de l'àrea de contingut i no afecta el disseny de cap contingut que precedeix el vídeo.
Codi
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demostració
Notes
Tots els exemples de codi utilitzen el widget Incrustar YouTube de DevSite, que fa un seguiment automàtic de les dades de Google Analytics. Excepte en casos especials en què no voleu recopilar estadístiques d'ús d'un vídeo incrustat, feu servir aquest giny. Sense això, les estadístiques d'ús del vostre vídeo no s'enviaran a Analytics.