amp-youtube

Показывает видео, размещенное на 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.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow

Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub