Du kan bädda in YouTube-videor direkt på DevSite-sidor med det anpassade elementet <devsite-video> . Alla videor är responsiva och har ett 16:9-förhållande när visningsportens bredd ändras.
Om du vill bädda in en YouTube-video lägger du till ett anpassat element <devsite-video> på din sida och ställer in video-id -attributet till värdet för v URL-parametern för videon.
Om du till exempel vill bädda in YouTube-videon "Your First Script - Apps Script Tutorials" som du hittar på https://www.youtube.com/watch?v=Pgfbl_o9WvM lägger du till följande <devsite-video> anpassade element till din DevSite sida:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Slå sedan in det anpassade elementet <devsite-video> i ett <div> -element vars class är inställt på ett av värdena nedan:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Standard
Följande exempel visar hur en inbäddad YouTube-video visas när <devsite-video> är inbäddad i ett <div> -element vars class är inställt på video-wrapper .
På stora skärmar är videon 50 % av innehållsområdets bredd och flyter till höger om allt innehåll som videon föregår. På små skärmar är videon 100 % av innehållsområdets bredd.
Koda
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Svävade vänster
Följande exempel visar hur en inbäddad YouTube-video visas när <devsite-video> är inbäddad i ett <div> -element vars klassattribut är inställt på video-wrapper-left .
På stora skärmar är videon 50 % av innehållsområdets bredd och flyter till vänster om allt innehåll som videon föregår. På små skärmar är videon 100 % av innehållsområdets bredd.
Koda
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Full bredd
Följande exempel visar hur en inbäddad YouTube-video visas när <devsite-video> är inbäddad i ett <div> -element vars class är inställt på video-wrapper-full-width .
Videon är 100 % av innehållsområdets bredd och påverkar inte layouten på något innehåll som videon föregår.
Koda
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Anteckningar
Alla kodexempel använder DevSites Embed YouTube-widget , som spårar Google Analytics-data automatiskt. Med undantag för speciella fall där du inte vill samla in användningsstatistik för en inbäddad video, använd den här widgeten. Utan det kommer användningsstatistik för din video inte att skickas till Analytics.