Du kan bygge inn YouTube-videoer direkte på DevSite-sider ved å bruke det tilpassede elementet <devsite-video> . Alle videoer er responsive og opprettholder et 16:9-forhold når visningsportens bredde endres.
For å bygge inn en YouTube-video, legg til et egendefinert <devsite-video> -element på siden din og sett video-id -attributtet til verdien av v URL-parameteren for videoen.
For å bygge inn YouTube-videoen "Your First Script - Apps Script Tutorials" som du finner på https://www.youtube.com/watch?v=Pgfbl_o9WvM , legg til følgende <devsite-video> egendefinerte element i DevSite-side:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Pakk deretter inn det tilpassede elementet <devsite-video> i et <div> -element hvis class er satt til en av verdiene nedenfor:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Misligholde
Følgende eksempel viser hvordan en innebygd YouTube-video vises når <devsite-video> er pakket inn i et <div> -element hvis class er satt til video-wrapper .
På store skjermer er videoen 50 % av innholdsområdets bredde og flyter til høyre for alt innhold videoen går foran. På små skjermer er videoen 100 % av innholdsområdets bredde.
Kode
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Flyttet til venstre
Følgende eksempel viser hvordan en innebygd YouTube-video vises når <devsite-video> er pakket inn i et <div> -element hvis klasseattributt er satt til video-wrapper-left .
På store skjermer er videoen 50 % av innholdsområdets bredde og flyter til venstre for alt innhold videoen går foran. På små skjermer er videoen 100 % av innholdsområdets bredde.
Kode
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Full bredde
Følgende eksempel viser hvordan en innebygd YouTube-video vises når <devsite-video> er pakket inn i et <div> -element hvis class er satt til video-wrapper-full-width .
Videoen er 100 % av innholdsområdets bredde og påvirker ikke utformingen av noe innhold videoen går foran.
Kode
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Notater
Alle kodeeksemplene bruker DevSites Embed YouTube-widget , som sporer Google Analytics-data automatisk. Med unntak av spesielle tilfeller der du ikke ønsker å samle inn bruksstatistikk for en innebygd video, bruk denne widgeten. Uten den vil ikke bruksstatistikk for videoen din bli sendt til Analytics.