YouTube videozapise možete ugraditi izravno na stranice DevSite pomoću prilagođenog elementa <devsite-video> . Svi su videozapisi responzivni i održavaju omjer 16:9 kako se mijenja širina okvira za prikaz.
Da biste ugradili YouTube video, dodajte <devsite-video> prilagođeni element na svoju stranicu i postavite video-id atribut na vrijednost v URL parametra za video.
Na primjer, da biste ugradili YouTube videozapis "Your First Script - Apps Script Tutorials" koji možete pronaći na https://www.youtube.com/watch?v=Pgfbl_o9WvM , dodajte sljedeći prilagođeni element <devsite-video> svom Stranica DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Zatim zamotajte prilagođeni element <devsite-video> u element <div> čiji je atribut class postavljen na jednu od vrijednosti u nastavku:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Zadano
Sljedeći primjer pokazuje kako se prikazuje ugrađeni YouTube video kada je <devsite-video> omotan u element <div> čiji je atribut class postavljen na video-wrapper .
Na velikim zaslonima, video je 50% širine područja sadržaja i lebdi s desne strane bilo kojeg sadržaja ispred kojeg je video. Na malim zaslonima, video je 100% širine područja sadržaja.
Kodirati
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Plutao lijevo
Sljedeći primjer pokazuje kako se prikazuje ugrađeni YouTube video kada je <devsite-video> omotan u <div> element čiji je atribut klase postavljen na video-wrapper-left .
Na velikim zaslonima, video je 50% širine područja sadržaja i lebdi lijevo od bilo kojeg sadržaja ispred kojeg je video. Na malim zaslonima, video je 100% širine područja sadržaja.
Kodirati
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Puna širina
Sljedeći primjer pokazuje kako se prikazuje ugrađeni YouTube video kada je <devsite-video> omotan u element <div> čiji je atribut class postavljen na video-wrapper-full-width .
Videozapis je 100% širine područja sadržaja i ne utječe na raspored bilo kojeg sadržaja koji prethodi videozapisu.
Kodirati
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Bilješke
Svi primjeri koda koriste DevSiteov Embed YouTube widget , koji automatski prati Google Analytics podatke. Osim u posebnim slučajevima kada ne želite prikupljati statistiku korištenja za ugrađeni video, upotrijebite ovaj widget. Bez njega statistika korištenja za vaš video neće biti poslana u Analytics.