#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文 Polski Tiếng việt

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, а ключи – в "верблюжьей" нотации:
  • например, "data-param-controls=1" следует обозначать как "&controls=1".
Подробнее о параметрах встраиваемого видеопроигрывателя YouTube…
dock Требуется расширение amp-video-docking. Если этот атрибут указан и воспроизведение ролика включено пользователем, то когда видео при прокрутке выходит из зоны видимости, оно уменьшается и закрепляется в углу экрана или в заданном месте. Подробнее…
credentials (необязательно) Определяет параметр credentials в соответствии с Fetch API.
  • Поддерживаемые значения: "omit", "include".
  • Значение по умолчанию: "include".
Если вы хотите использовать видеопроигрыватель YouTube в режиме повышенной конфиденциальности, присвойте атрибуту значение omit. Обычно YouTube устанавливает файлы cookie при загрузке видеопроигрывателя. В режиме же повышенной конфиденциальности, эти файлы устанавливаются, когда пользователь нажимает на видео.
common attributes Этот элемент содержит распространенные атрибуты, расширенные до компонентов AMP.

Проверка

О правилах для amp-youtube читайте в спецификации валидатора AMP.

Требуется дополнительная помощь?

Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.

Перейти на Stack Overflow
Нашли ошибку или недостающую функцию?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Перейти на GitHub