Du kan integrere YouTube-videoer direkte på DevSite-sider ved hjælp af det tilpassede element <devsite-video> . Alle videoer er responsive og bevarer et 16:9-forhold, efterhånden som visningsportens bredde ændres.
For at integrere en YouTube-video skal du tilføje et tilpasset <devsite-video> -element til din side og indstille video-id -attributten til værdien af v URL-parameteren for videoen.
Hvis du f.eks. vil integrere YouTube-videoen "Dit første script - Apps Script-vejledninger", som du kan finde på https://www.youtube.com/watch?v=Pgfbl_o9WvM , skal du tilføje følgende <devsite-video> tilpassede element til din DevSite side:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Indpak derefter det tilpassede element <devsite-video> i et <div> -element, hvis class er indstillet til en af værdierne nedenfor:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Misligholdelse
Følgende eksempel viser, hvordan en indlejret YouTube-video vises, når <devsite-video> er pakket ind i et <div> -element, hvis class er indstillet til video-wrapper .
På store skærme er videoen 50 % af indholdsområdets bredde og svæver til højre for ethvert indhold, videoen går forud. På små skærme er videoen 100 % af indholdsområdets bredde.
Kode
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Svævede til venstre
Følgende eksempel viser, hvordan en indlejret YouTube-video vises, når <devsite-video> er pakket ind i et <div> -element, hvis klasseattribut er indstillet til video-wrapper-left .
På store skærme er videoen 50 % af indholdsområdets bredde og svæver til venstre for ethvert indhold, videoen går forud. På små skærme er videoen 100 % af indholdsområdets bredde.
Kode
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Fuld bredde
Følgende eksempel viser, hvordan en indlejret YouTube-video vises, når <devsite-video> er pakket ind i et <div> -element, hvis class er indstillet til video-wrapper-full-width .
Videoen er 100 % af indholdsområdets bredde og påvirker ikke layoutet af noget indhold, videoen går forud for.
Kode
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Noter
Alle kodeeksemplerne bruger DevSites Embed YouTube-widget , som sporer Google Analytics-data automatisk. Bortset fra særlige tilfælde, hvor du ikke ønsker at indsamle brugsstatistik for en indlejret video, skal du bruge denne widget. Uden det vil brugsstatistik for din video ikke blive sendt til Analytics.