amp-youtube
Description
Показ видеоролика YouTube
Required Scripts
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Supported Layouts
Показывает видео, размещенное на YouTube.
Скрипт | <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> |
Поддерживаемые макеты | fill, fixed, fixed-height, flex-item, nodisplay, responsive |
Примеры | Аннотированный пример кода для amp-youtube |
Пример
Если использовать адаптивный макет (layout="responsive") и значения ширины и высоты, указанные в примере ниже, вы получите макет для видео с соотношением сторон 16:9.
<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270"></amp-youtube>
<amp-youtube id="myLiveChannel" data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q" width="358" height="204" layout="responsive"> <amp-img src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg" placeholder layout="fill" /> </amp-youtube>
Атрибуты
autoplay | Если этот атрибут указан и браузер поддерживает автовоспроизведение:
|
data-videoid | Идентификатор видео YouTube. Он указывается в URL страницы, на которой размещен ролик YouTube. Например, в этом URL: https://www.youtube.com/watch?v=Z1q71gFeRqM строка Z1q71gFeRqM – идентификатор видео. |
data-live-channelid | Идентификатор канала YouTube, на котором проводится прямая трансляция. Например, в этом URL: https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q, строка UCB8Kb4pxYzsDsHxzBfnid4Q – идентификатор канала. Если нужно указать URL прямой трансляции, а не ролика, используйте атрибут data-live-channelid вместо data-videoid . Для каналов не используются теги (placeholder) по умолчанию. Вы можете указать такой тег для видео, как это сделано во второй части примера выше. |
data-param- | Все атрибуты data-param- добавляются в качестве параметров запроса в тег "iframe src", используемый в YouTube. Их можно использовать для передачи в плагины YouTube пользовательских параметров (которые определяют, например, показ элементов управления). Ключи и параметры должны указаны в кодировке URI, а ключи – в "верблюжьей" нотации:
|
dock | Требуется расширение amp-video-docking . Если этот атрибут указан и воспроизведение ролика включено пользователем, то когда видео при прокрутке выходит из зоны видимости, оно уменьшается и закрепляется в углу экрана или в заданном месте. Подробнее… |
credentials (необязательно) | Определяет параметр credentials в соответствии с Fetch API.
omit . Обычно YouTube устанавливает файлы cookie при загрузке видеопроигрывателя. В режиме же повышенной конфиденциальности, эти файлы устанавливаются, когда пользователь нажимает на видео. |
common attributes | Этот элемент содержит распространенные атрибуты, расширенные до компонентов AMP. |
Проверка
О правилах для amp-youtube читайте в спецификации валидатора AMP.
Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.
Перейти на Stack Overflow Нашли ошибку или недостающую функцию?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Перейти на GitHub