Videoposnetke YouTube lahko vdelate neposredno na strani DevSite z uporabo elementa po meri <devsite-video> . Vsi videoposnetki so odzivni in ohranjajo razmerje 16:9, ko se spreminja širina vidnega polja.
Če želite vdelati video YouTube, dodajte element po meri <devsite-video> na svojo stran in nastavite atribut video-id na vrednost parametra v URL za video.
Na primer, če želite vdelati YouTube videoposnetek "Your First Script - Apps Script Tutorials", ki ga najdete na https://www.youtube.com/watch?v=Pgfbl_o9WvM , dodajte naslednji element po meri <devsite-video> Stran DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Nato zavijte element po meri <devsite-video> v element <div> , katerega atribut class je nastavljen na eno od spodnjih vrednosti:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Privzeto
Naslednji primer prikazuje, kako je vdelan YouTube video prikazan, ko je <devsite-video> ovit v element <div> katerega atribut class je nastavljen na video-wrapper .
Na velikih zaslonih obsega videoposnetek 50 % širine območja vsebine in lebdi na desni strani katere koli vsebine pred videoposnetkom. Na majhnih zaslonih je videoposnetek širok 100 % širine območja vsebine.
Koda
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Lebdel levo
Naslednji primer prikazuje, kako je vdelan YouTube video prikazan, ko je <devsite-video> ovit v element <div> katerega atribut razreda je nastavljen na video-wrapper-left .
Na velikih zaslonih obsega videoposnetek 50 % širine območja vsebine in lebdi levo od katere koli vsebine pred videoposnetkom. Na majhnih zaslonih je videoposnetek širok 100 % širine območja vsebine.
Koda
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Polna širina
Naslednji primer prikazuje, kako je vdelan YouTube video prikazan, ko je <devsite-video> ovit v element <div> katerega atribut class je nastavljen na video-wrapper-full-width .
Videoposnetek obsega 100 % širine območja vsebine in ne vpliva na postavitev katere koli vsebine pred videoposnetkom.
Koda
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Opombe
Vsi primeri kode uporabljajo pripomoček Embed YouTube podjetja DevSite, ki samodejno sledi podatkom storitve Google Analytics. Razen v posebnih primerih, ko ne želite zbirati statističnih podatkov o uporabi za vdelan video, uporabite ta pripomoček. Brez tega statistika uporabe vašega videoposnetka ne bo poslana v Analytics.