Videá YouTube môžete vložiť priamo na stránky DevSite pomocou vlastného prvku <devsite-video> . Všetky videá sú responzívne a pri zmene šírky zobrazovanej oblasti si zachovávajú pomer strán 16:9.
Ak chcete vložiť video YouTube, pridajte na svoju stránku vlastný prvok <devsite-video> a nastavte atribút video-id na hodnotu parametra v URL pre video.
Ak chcete napríklad vložiť video YouTube „Your First Script – Apps Script Tutorials“, ktoré nájdete na stránke https://www.youtube.com/watch?v=Pgfbl_o9WvM , pridajte nasledujúci vlastný prvok <devsite-video> do svojho Stránka DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Potom zabaľte vlastný prvok <devsite-video> do prvku <div> , ktorého atribút class je nastavený na jednu z nižšie uvedených hodnôt:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Predvolené
Nasledujúci príklad ukazuje, ako sa zobrazuje vložené video YouTube, keď je <devsite-video> zabalené do prvku <div> , ktorého atribút class je nastavený na video-wrapper .
Na veľkých obrazovkách má video 50 % šírky oblasti obsahu a pláva napravo od akéhokoľvek obsahu, ktorý video predchádza. Na malých obrazovkách má video 100 % šírky oblasti obsahu.
kód
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Plávalo doľava
Nasledujúci príklad ukazuje, ako sa zobrazuje vložené video YouTube, keď je <devsite-video> zabalené do prvku <div> , ktorého atribút class je nastavený na video-wrapper-left .
Na veľkých obrazovkách má video 50 % šírky oblasti obsahu a pláva naľavo od akéhokoľvek obsahu, ktorému video predchádza. Na malých obrazovkách má video 100 % šírky 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á šírka
Nasledujúci príklad ukazuje, ako sa zobrazuje vložené video YouTube, keď je <devsite-video> zabalené do prvku <div> , ktorého atribút class je nastavený na video-wrapper-full-width .
Video má 100 % šírky oblasti obsahu a nemá vplyv na rozloženie obsahu, ktorému video predchádza.
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šetky príklady kódu používajú miniaplikáciu Embed YouTube na stránke DevSite, ktorá automaticky sleduje údaje služby Google Analytics. Okrem špeciálnych prípadov, keď nechcete zhromažďovať štatistiky používania pre vložené video, použite tento widget. Bez neho sa štatistiky používania vášho videa neodošlú do služby Analytics.