Ви можете вставляти відео YouTube безпосередньо на сторінки DevSite за допомогою спеціального елемента <devsite-video> . Усі відео адаптивні та зберігають співвідношення 16:9 при зміні ширини вікна перегляду.
Щоб вставити відео YouTube, додайте спеціальний елемент <devsite-video> на свою сторінку та встановіть для атрибута video-id значення параметра v URL для відео.
Наприклад, щоб вставити відео YouTube "Your First Script - Apps Script Tutorials", яке можна знайти на https://www.youtube.com/watch?v=Pgfbl_o9WvM , додайте наступний настроюваний елемент <devsite-video> до свого Сторінка DevSite:
<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>
За замовчуванням
У наступному прикладі показано, як відображається вбудоване відео YouTube, коли <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>
Демо
Поплив ліворуч
У наведеному нижче прикладі показано, як відображається вбудоване відео YouTube, коли <devsite-video> загорнуто в елемент <div> , для атрибута class якого встановлено значення video-wrapper-left .
На великих екранах відео займає 50% ширини області вмісту та плаває ліворуч від будь-якого вмісту, якому відео передує. На маленьких екранах відео займає 100% ширини області вмісту.
Код
<div class="video-wrapper-left">
<devsite-video video-id="Pgfbl_o9WvM"></devsite-video>
</div>
<p>Lorem ipsum dolor...</p>
Демо
На всю ширину
У наступному прикладі показано, як відображається вбудоване відео YouTube, коли <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>
Демо
Примітки
Усі приклади коду використовують віджет Embed YouTube від DevSite, який автоматично відстежує дані Google Analytics. За винятком особливих випадків, коли ви не хочете збирати статистику використання для вбудованого відео, використовуйте цей віджет. Без нього статистика використання вашого відео не надсилатиметься в Analytics.