Filmy z YouTube możesz umieszczać bezpośrednio na stronach DevSite za pomocą elementu niestandardowego <devsite-video>. Wszystkie filmy są responsywne i utrzymają format 16:9, gdy zmieni się szerokość widocznego obszaru.
Aby osadzić film z YouTube, dodaj na stronie element niestandardowy <devsite-video> i ustaw atrybut video-id na wartość parametru URL v filmu.
Aby na przykład osadzić film YouTube „Your First Script – Apps Script Tutorials” (Twój pierwszy skrypt – samouczki dotyczące skryptów aplikacji), który znajdziesz na stronie https://www.youtube.com/watch?v=Pgfbl_o9WvM, dodaj do strony DevSite ten element niestandardowy: <devsite-video>.
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Następnie spakuj element niestandardowy <devsite-video> w element <div>, w którego atrybucie class ustawisz jedną z tych wartości:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Domyślny
Ten przykład pokazuje, jak wyświetla się umieszczony film z YouTube, gdy element <devsite-video> jest opakowany w elemencie <div>, którego atrybut class ma wartość video-wrapper.
Na dużych ekranach film zajmuje 50% szerokości obszaru treści i jest przesunięty w prawo od treści, które poprzedzają film. Na małych ekranach film zajmuje 100% szerokości obszaru treści.
Kod
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Prezentacja
Przesunięcie w lewo
Ten przykład pokazuje, jak wyświetla się osadzony film z YouTube, gdy <devsite-video> jest zawinięty w element <div>, którego atrybut class ma wartość video-wrapper-left.
Na dużych ekranach film zajmuje 50% szerokości obszaru treści i znajduje się po lewej stronie wszystkich treści, które poprzedzają film. Na małych ekranach film zajmuje 100% szerokości obszaru treści.
Kod
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Prezentacja
Pełna szerokość
Ten przykład pokazuje, jak wyświetla się umieszczony film z YouTube, gdy element <devsite-video> jest opakowany w elemencie <div>, którego atrybut class ma wartość video-wrapper-full-width.
Film zajmuje 100% szerokości obszaru treści i nie wpływa na układ treści, które poprzedzają film.
Kod
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Prezentacja
Uwagi
Wszystkie przykłady kodu korzystają z widżetu osadzania YouTube z witryny DevSite, który automatycznie rejestruje dane Google Analytics. Używaj tego widżetu z wyjątkiem szczególnych przypadków, w których nie chcesz zbierać statystyki dotyczące korzystania z osadzonego filmu. Bez niego statystyki dotyczące użytkowania filmu nie będą wysyłane do Analytics.