Вы можете вставлять видео YouTube непосредственно на страницы DevSite, используя пользовательский элемент <devsite-video> . Все видео адаптивны и поддерживают соотношение 16:9 при изменении ширины области просмотра.
Чтобы встроить видео YouTube, добавьте на свою страницу пользовательский элемент <devsite-video> и установите для атрибута video-id значение параметра v URL для видео.
Например, чтобы встроить видео YouTube «Ваш первый скрипт — учебные пособия по сценариям приложений», которое вы можете найти по адресу 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> , атрибут класса которого имеет значение 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>
Демо
Примечания
Во всех примерах кода используется виджет DevSite Embed YouTube , который автоматически отслеживает данные Google Analytics. За исключением особых случаев, когда вы не хотите собирать статистику использования встроенного видео, используйте этот виджет. Без него статистика использования вашего видео не будет отправляться в Analytics.