Videa YouTube můžete vkládat přímo na stránky DevSite pomocí vlastního prvku <devsite-video> . Všechna videa jsou responzivní a při změně šířky zobrazované oblasti si zachovávají poměr stran 16:9.
Chcete-li vložit video YouTube, přidejte na svou stránku vlastní prvek <devsite-video> a nastavte atribut video-id na hodnotu parametru v URL pro video.
Chcete-li například vložit video YouTube „Váš první skript – výukové programy Apps Script“, které najdete na adrese https://www.youtube.com/watch?v=Pgfbl_o9WvM , přidejte do svého webu následující vlastní prvek <devsite-video> Stránka DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Poté zabalte vlastní prvek <devsite-video> do prvku <div> , jehož atribut class je nastaven na jednu z níže uvedených hodnot:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Výchozí
Následující příklad ukazuje, jak se zobrazí vložené video YouTube, když je <devsite-video> zabaleno do prvku <div> , jehož atribut class je nastaven na video-wrapper .
Na velkých obrazovkách má video 50 % šířky oblasti obsahu a plave napravo od jakéhokoli obsahu, kterému video předchází. Na malých obrazovkách zabírá video 100 % šířky oblasti obsahu.
Kód
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Plaval doleva
Následující příklad ukazuje, jak se zobrazí vložené video YouTube, když je <devsite-video> zabaleno do prvku <div> , jehož atribut class je nastaven na video-wrapper-left .
Na velkých obrazovkách má video 50 % šířky oblasti obsahu a plave vlevo od jakéhokoli obsahu, kterému video předchází. Na malých obrazovkách zabírá video 100 % šířky oblasti obsahu.
Kód
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Plná šířka
Následující příklad ukazuje, jak se zobrazí vložené video YouTube, když je <devsite-video> zabaleno do prvku <div> , jehož atribut class je nastaven na video-wrapper-full-width .
Video je 100 % šířky oblasti obsahu a nemá vliv na rozvržení obsahu, kterému video předchází.
Kód
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Poznámky
Všechny příklady kódu využívají widget DevSite Embed YouTube , který automaticky sleduje data Google Analytics. S výjimkou zvláštních případů, kdy nechcete shromažďovat statistiky využití pro vložené video, použijte tento widget. Bez něj nebudou statistiky využití vašeho videa odesílány do služby Analytics.