Готовые решения по оформлению видео в IFrame

Руководство содержит готовые примеры для оформления видеоплеера в зависимости от назначения видео. Выберите один из вариантов и при необходимости доработайте его под ваши задачи.

Чтобы воспользоваться примерами для оформления видео в IFrame:

1. Загрузите видео в Yandex Cloud Video.
2. Сохраните ссылку на видео.
3. Добавьте в код вашей HTML-страницы код вставки iframe.
4. Скопируйте код вставки iframe из примера, указав в нем ссылку на ваше видео.

Если требуется передать видео в виде URL — скопируйте из примера из поля src параметры видео после знака ?.

Некоторые из параметров видеоплеера можно настроить в интерфейсе Cloud Video:

Автоматически воспроизводить видео без звукаАвтоматически воспроизводить видео без звука

<iframe
    frameborder="0"
    scrolling="no"
    allowfullscreen
    allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
    src="<ссылка>?autoplay=1&mute=true">
</iframe>

Где:

• <ссылка> — ссылка на воспроизводимый контент, например https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.
• autoplay=1 — автоматически запускает видео при загрузке плеера.
• mute=true — выключает звук.

Автоматически воспроизводить зацикленное видеоАвтоматически воспроизводить зацикленное видео

<iframe
    frameborder="0"
    scrolling="no"
    allowfullscreen
    allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
    src="<ссылка>?autoplay=1&loop=true">
</iframe>

Где:

• <ссылка> — ссылка на воспроизводимый контент, например https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.
• autoplay=1 — автоматически запускает видео при загрузке плеера.
• loop=true — зацикливает воспроизведение видео.

Автоматически воспроизводить видео со скрытыми элементамиАвтоматически воспроизводить видео со скрытыми элементами

<iframe
    frameborder="0"
    scrolling="no"
    allowfullscreen
    allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
    src="<ссылка>?autoplay=1&hidden=*,!time,!sound">
</iframe>

Где:

• <ссылка> — ссылка на воспроизводимый контент, например https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.
• autoplay=1 — автоматически запускает видео при загрузке плеера.
• hidden=*,!time,!sound — скрывает все элементы интерфейса плеера, кроме текущего времени и кнопки включения/отключения звука.

Настроить виджеты плеераНастроить виджеты плеера

<iframe
    width="560" height="315"
    frameborder="0"
    scrolling="no"
    allowfullscreen
    allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
    src="<ссылка>?player_color=yellow&autoplay=0&player_border_radius=10">
</iframe>

Где:

• width — ширина блока плеера.
• height — высота блока плеера.
• <ссылка> — ссылка на воспроизводимый контент, например https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.
• player_color — устанавливает цвет элементов интерфейса плеера.
• player_border_radius — скругляет углы блока плеера.

Оформить видео для карточки товараОформить видео для карточки товара

Чтобы оформить видео для карточки товара, потребуется настроить автоматическое воспроизведение видео в зоне видимости, без звука и без элементов управления.

<iframe
    frameborder="10"
    scrolling="no"
    allowfullscreen
    allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
    src="<ссылка>?loop=true&allow_muted=true&play_on_visible=true&hidden=*">
</iframe>

Где:

• frameborder — ширина рамки блока плеера.
• <ссылка> — ссылка на воспроизводимый контент, например https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.
• loop=true — зацикливает воспроизведение видео.
• allow_muted=true — автоматически запускает видео без звука.
• play_on_visible=true — видео воспроизводится только в зоне видимости.
• hidden=* — скрывает все элементы интерфейса плеера.

Рекомендовать к просмотру другие видеоРекомендовать к просмотру другие видео

Чтобы после просмотра видео предложить пользователю другие видео по теме, воспользуйтесь плейлистом:

1. Загрузите несколько видео в Yandex Cloud Video.
2. Создайте плейлист и добавьте в него загруженные видео.
3. Сохраните ссылку на плейлист.
4. Добавьте в код вашей HTML-страницы код вставки iframe.
5. Скопируйте код вставки iframe из примера, указав в нем ссылку на ваш плейлист.

<iframe
    frameborder="0"
    width="300" height="400"
    scrolling="no"
    allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
    src="<ссылка_на_плейлист>?autoplay=0&mute=0&background_color=ffeaea&widget_text_color_primary=841327&playlist_selected_item_background_color=FF8EA2&player_border_radius=10&playlist_item_border_radius=5">
</iframe>

Где:

• frameborder — ширина рамки блока плеера.
• width — ширина блока плеера.
• height — высота блока плеера.
• <ссылка_на_плейлист> — ссылка на воспроизводимый плейлист, например https://runtime.strm.yandex.ru/player/playlist/vplqibh5xiq5c45ij777.
• autoplay=0 — видео не запускается автоматически.
• mute=0 — звук включен.
• Параметры стилизации:
  • background_color=ffeaea — цвет фона плеера и виджетов.
  • widget_text_color_primary=841327 — цвет основного текста виджетов.
  • playlist_selected_item_background_color=FF8EA2 — цвет фона активного элемента плейлиста.
  • player_border_radius=10 — скругление углов блока плеера.
  • playlist_item_border_radius=5 — скругление углов элементов плейлиста.

Подробнее о параметрах стилизации см. в разделе Настройка параметров видеоплеера.