Varat iegult YouTube videoklipus tieši DevSite lapās, izmantojot pielāgoto elementu <devsite-video> . Visi videoklipi ir adaptīvi un saglabā proporciju 16:9, mainoties skatvietas platumam.
Lai iegultu YouTube videoklipu, pievienojiet savai lapai pielāgotu elementu <devsite-video> un iestatiet atribūtu video-id atbilstoši videoklipa parametra v URL vērtībai.
Piemēram, lai iegultu YouTube videoklipu “Jūsu pirmais skripts — lietotņu skriptu apmācības”, ko varat atrast vietnē https://www.youtube.com/watch?v=Pgfbl_o9WvM , pievienojiet savai vietnei šādu pielāgoto elementu <devsite-video> . DevSite lapa:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Pēc tam ietiniet pielāgoto elementu <devsite-video> elementā <div> , kura class atribūts ir iestatīts uz vienu no tālāk norādītajām vērtībām:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Noklusējums
Nākamajā piemērā ir parādīts, kā tiek parādīts iegultais YouTube videoklips, kad <devsite-video> ir ietīts elementā <div> , kura class atribūts ir iestatīts uz video-wrapper .
Lielos ekrānos videoklips ir 50% no satura apgabala platuma, un tas peld pa labi no jebkura satura, kas atrodas pirms videoklipa. Mazos ekrānos video ir 100% no satura apgabala platuma.
Kods
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demonstrācija
Peldēja pa kreisi
Nākamajā piemērā ir parādīts, kā tiek parādīts iegultais YouTube videoklips, kad <devsite-video> ir ietīts elementā <div> , kura klases atribūts ir iestatīts uz video-wrapper-left .
Lielos ekrānos videoklips ir 50% no satura apgabala platuma, un tas peld pa kreisi no jebkura satura, kas atrodas pirms videoklipa. Mazos ekrānos video ir 100% no satura apgabala platuma.
Kods
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demonstrācija
Pilna platuma
Nākamajā piemērā ir parādīts, kā tiek parādīts iegultais YouTube videoklips, kad <devsite-video> ir ietīts elementā <div> , kura class atribūts ir iestatīts uz video-wrapper-full-width .
Videoklips ir 100% no satura apgabala platuma, un tas neietekmē satura izkārtojumu pirms videoklipa.
Kods
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demonstrācija
Piezīmes
Visos koda piemēros tiek izmantots DevSite logrīks Embed YouTube , kas automātiski izseko Google Analytics datus. Izņemot īpašus gadījumus, kad nevēlaties apkopot iegulta videoklipa lietošanas statistiku, izmantojiet šo logrīku. Bez tā jūsu videoklipa lietošanas statistika netiks nosūtīta pakalpojumam Analytics.