YouTube-videókat közvetlenül beágyazhat a DevSite oldalaiba a <devsite-video> egyéni elem használatával. Minden videó reszponzív, és a 16:9-es képarányt megtartja, ahogy a nézetablak szélessége változik.
YouTube-videó beágyazásához adjon hozzá egy <devsite-video> egyéni elemet az oldalához, és állítsa be a video-id attribútumot a videó v URL paraméterének értékére.
Például a https://www.youtube.com/watch?v=Pgfbl_o9WvM címen található „Az első szkripted – Apps Script oktatóanyagok” YouTube-videó beágyazásához adja hozzá a következő egyéni <devsite-video> elemet Fejlesztői oldal:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Ezután csomagolja be a <devsite-video> egyéni elemet egy <div> elembe, amelynek class attribútuma az alábbi értékek egyikére van beállítva:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Alapértelmezett
A következő példa bemutatja, hogyan jelenik meg egy beágyazott YouTube-videó, amikor <devsite-video> egy <div> elembe van burkolva, amelynek class attribútuma video-wrapper értékre van állítva.
Nagy képernyőkön a videó a tartalomterület szélességének 50%-át teszi ki, és a videó előtti tartalomtól jobbra lebeg. Kis képernyőkön a videó a tartalomterület szélességének 100%-át teszi ki.
Kód
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demó
Lebegett balra
A következő példa bemutatja, hogyan jelenik meg egy beágyazott YouTube-videó, amikor <devsite-video> egy <div> elembe van burkolva, amelynek class attribútuma video-wrapper-left értékre van állítva.
Nagy képernyőkön a videó a tartalomterület szélességének 50%-át teszi ki, és a videó előtti tartalomtól balra lebeg. Kis képernyőkön a videó a tartalomterület szélességének 100%-át teszi ki.
Kód
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demó
Teljes szélességben
A következő példa bemutatja, hogyan jelenik meg egy beágyazott YouTube-videó, amikor <devsite-video> egy <div> elembe van burkolva, amelynek class attribútuma video-wrapper-full-width értékre van állítva.
A videó a tartalomterület szélességének 100%-a, és nem befolyásolja a videó előtti tartalom elrendezését.
Kód
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demó
Megjegyzések
Az összes kódpélda a DevSite YouTube Embed modulját használja, amely automatikusan követi a Google Analytics adatait. Kivéve azokat a speciális eseteket, amikor nem szeretne használati statisztikákat gyűjteni egy beágyazott videóhoz, használja ezt a modult. Enélkül a videód használati statisztikáit nem küldi el az Analytics.