„YouTube“ vaizdo įrašus galite įterpti tiesiai į „DevSite“ puslapius naudodami tinkintą elementą <devsite-video> . Visi vaizdo įrašai yra jautrūs ir išlaikomas 16:9 santykis, kai keičiasi peržiūros srities plotis.
Norėdami įterpti „YouTube“ vaizdo įrašą, savo puslapyje pridėkite tinkintą elementą <devsite-video> ir nustatykite video-id atributą į vaizdo įrašo parametro v URL reikšmę.
Pavyzdžiui, norėdami įterpti „YouTube“ vaizdo įrašą „Jūsų pirmasis scenarijus – programų scenarijaus mokymo programos“, kurį galite rasti adresu https://www.youtube.com/watch?v=Pgfbl_o9WvM , prie savo pridėkite šį tinkintą elementą <devsite-video> DevSite puslapis:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Tada įdėkite pasirinktinį elementą <devsite-video> į <div> elementą, kurio class atributas nustatytas į vieną iš toliau nurodytų reikšmių:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Numatytoji
Toliau pateiktame pavyzdyje parodyta, kaip rodomas įterptasis „YouTube“ vaizdo įrašas, kai <devsite-video> yra įvyniotas į elementą <div> , kurio class atributas nustatytas kaip video-wrapper .
Dideliuose ekranuose vaizdo įrašas sudaro 50 % turinio srities pločio ir slenka į dešinę nuo bet kokio vaizdo įrašo esančio turinio. Mažuose ekranuose vaizdo įrašas sudaro 100 % turinio srities pločio.
Kodas
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Plūduriavo kairėn
Toliau pateiktame pavyzdyje parodyta, kaip rodomas įterptasis „YouTube“ vaizdo įrašas, kai <devsite-video> yra suvyniotas į elementą <div> , kurio klasės atributas nustatytas kaip video-wrapper-left .
Dideliuose ekranuose vaizdo įrašas sudaro 50 % turinio srities pločio ir slankioja į kairę nuo bet kokio turinio, kuris yra prieš vaizdo įrašą. Mažuose ekranuose vaizdo įrašas sudaro 100 % turinio srities pločio.
Kodas
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Viso pločio
Toliau pateiktame pavyzdyje parodyta, kaip įterptasis „YouTube“ vaizdo įrašas rodomas, kai <devsite-video> yra įvyniotas į elementą <div> , kurio class atributas nustatytas kaip video-wrapper-full-width .
Vaizdo įrašas yra 100 % turinio srities pločio ir neturi įtakos turinio, kuris rodomas prieš vaizdo įrašą, išdėstymui.
Kodas
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Pastabos
Visuose kodo pavyzdžiuose naudojamas „DevSite“ valdiklis Embed YouTube , kuris automatiškai seka „Google Analytics“ duomenis. Išskyrus specialius atvejus, kai nenorite rinkti įterpto vaizdo įrašo naudojimo statistikos, naudokite šį valdiklį. Be jos vaizdo įrašo naudojimo statistika nebus siunčiama į „Analytics“.