Puteți încorpora videoclipuri YouTube direct în paginile DevSite folosind elementul personalizat <devsite-video> . Toate videoclipurile sunt receptive și păstrează un raport de 16:9 pe măsură ce lățimea ferestrei de vizualizare se modifică.
Pentru a încorpora un videoclip YouTube, adăugați un element personalizat <devsite-video> în pagina dvs. și setați atributul video-id la valoarea parametrului v URL pentru videoclip.
De exemplu, pentru a încorpora videoclipul YouTube „Primul tău script - Tutoriale pentru aplicații Script”, pe care îl poți găsi la https://www.youtube.com/watch?v=Pgfbl_o9WvM , adaugă următorul element personalizat <devsite-video> la Pagina DevSite:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Apoi împachetați elementul personalizat <devsite-video> într-un element <div> al cărui atribut class este setat la una dintre valorile de mai jos:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Implicit
Următorul exemplu arată cum este afișat un videoclip YouTube încorporat atunci când <devsite-video> este împachetat într-un element <div> al cărui atribut class este setat la video-wrapper .
Pe ecranele mari, videoclipul are 50% din lățimea zonei de conținut și plutește la dreapta oricărui conținut pe care îl precede videoclipul. Pe ecranele mici, videoclipul are 100% din lățimea zonei de conținut.
Cod
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
A plutit la stânga
Următorul exemplu arată cum este afișat un videoclip YouTube încorporat atunci când <devsite-video> este împachetat într-un element <div> al cărui atribut de clasă este setat la video-wrapper-left .
Pe ecranele mari, videoclipul are 50% din lățimea zonei de conținut și plutește la stânga oricărui conținut pe care îl precede videoclipul. Pe ecranele mici, videoclipul are 100% din lățimea zonei de conținut.
Cod
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Latimea intreaga
Următorul exemplu arată cum este afișat un videoclip YouTube încorporat atunci când <devsite-video> este împachetat într-un element <div> al cărui atribut class este setat la video-wrapper-full-width .
Videoclipul are 100% din lățimea zonei de conținut și nu afectează aspectul niciunui conținut pe care îl precede videoclipul.
Cod
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Demo
Note
Toate exemplele de cod folosesc widgetul Încorporați YouTube al DevSite, care urmărește automat datele Google Analytics. Cu excepția cazurilor speciale în care nu doriți să colectați statistici de utilizare pentru un videoclip încorporat, utilizați acest widget. Fără aceasta, statisticile de utilizare pentru videoclipul dvs. nu vor fi trimise la Analytics.