Puoi incorporare i video di YouTube direttamente nelle pagine di DevSite utilizzando l'elemento personalizzato <devsite-video>. Tutti i video sono adattabili e mantengono le proporzioni 16:9 quando la larghezza dell'area visibile cambia.
Per incorporare un video di YouTube, aggiungi un elemento personalizzato <devsite-video> alla pagina e imposta l'attributo video-id sul valore del parametro URL v del video.
Ad esempio, per incorporare il video di YouTube "Il tuo primo script - Tutorial di Apps Script" che puoi trovare all'indirizzo https://www.youtube.com/watch?v=Pgfbl_o9WvM,
aggiungi il seguente elemento personalizzato <devsite-video> alla pagina di DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Quindi, inserisci l'elemento personalizzato <devsite-video> in un elemento <div> il cui attributo class è impostato su uno dei valori riportati di seguito:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Predefinito
L'esempio seguente mostra come viene visualizzato un video di YouTube incorporato quando <devsite-video> è racchiuso in un elemento <div> il cui attributo class è impostato su video-wrapper.
Su schermi di grandi dimensioni, il video occupa il 50% della larghezza dell'area dei contenuti e si trova a destra di qualsiasi contenuto che precede. Su schermi di piccole dimensioni, il video occupa il 100% della larghezza dell'area dei contenuti.
Codice
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
A sinistra
L'esempio seguente mostra come viene visualizzato un video di YouTube incorporato quando <devsite-video> è racchiuso in un elemento <div> il cui attributo class è impostato su video-wrapper-left.
Su schermi di grandi dimensioni, il video occupa il 50% della larghezza dell'area dei contenuti e si trova a sinistra di tutti i contenuti che precede. Su schermi di piccole dimensioni, il video occupa il 100% della larghezza dell'area dei contenuti.
Codice
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Larghezza estesa
L'esempio seguente mostra come viene visualizzato un video di YouTube incorporato quando <devsite-video> è racchiuso in un elemento <div> il cui attributo class è impostato su video-wrapper-full-width.
Il video occupa il 100% della larghezza dell'area dei contenuti e non influisce sul layout dei contenuti che lo precedono.
Codice
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Note
Tutti gli esempi di codice utilizzano il widget di incorporamento di YouTube di DevSite, che monitora automaticamente i dati di Google Analytics. Utilizza questo widget, tranne nei casi speciali in cui non vuoi raccogliere statistiche sull'utilizzo di un video incorporato. In caso contrario, le statistiche sull'utilizzo del video non verranno inviate ad Analytics.