AMP
RU
English Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文

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