Можете да уградите ИоуТубе видео снимке директно у ДевСите странице помоћу прилагођеног елемента <devsite-video> . Сви видео снимци су брзи и одржавају однос 16:9 како се ширина прозора мења.
Да бисте уградили ИоуТубе видео, додајте прилагођени елемент <devsite-video> на своју страницу и подесите атрибут video-id на вредност параметра v УРЛ за видео.
На пример, да бисте уградили ИоуТубе видео „Ваша прва скрипта – упутства за скрипте за апликације“ који можете пронаћи на хттпс: //ввв.иоутубе.цом/ватцх?в= Пгфбл_о9ВвМ , додајте следећи прилагођени елемент <devsite-video> у свој ДевСите страница:
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
Затим умотајте прилагођени елемент <devsite-video> у елемент <div> чији је атрибут class постављен на једну од вредности испод:
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
Подразумевано
Следећи пример показује како се уграђени ИоуТубе видео приказује када је <devsite-video> умотан у елемент <div> чији је атрибут class подешен на video-wrapper .
На великим екранима, видео је 50% ширине области садржаја и лебди десно од било ког садржаја коме видео претходи. На малим екранима, видео је 100% ширине области садржаја.
Код
<div class="video-wrapper">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Демо
Плутао лево
Следећи пример показује како се уграђени ИоуТубе видео приказује када је <devsite-video> умотан у елемент <div> чији је атрибут класе подешен на video-wrapper-left .
На великим екранима, видео је 50% ширине области садржаја и лебди лево од било ког садржаја коме видео претходи. На малим екранима, видео је 100% ширине области садржаја.
Код
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Демо
Фулл-видтх
Следећи пример показује како се уграђени ИоуТубе видео приказује када је <devsite-video> умотан у елемент <div> чији је атрибут class подешен на video-wrapper-full-width .
Видео је 100% ширине области садржаја и не утиче на изглед било ког садржаја коме видео претходи.
Код
<div class="video-wrapper-full-width">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Демо
Напомене
Сви примери кода користе ДевСите-ов додатак за уграђивање ИоуТубе-а , који аутоматски прати податке Гоогле аналитике. Осим у посебним случајевима када не желите да прикупљате статистику коришћења за уграђени видео, користите овај виџет. Без тога, статистика коришћења за ваш видео неће бити послата Аналитици.