База знаний

6.3.6. Как вставить видео на сайт или лендинг (не с YouTube)

Есть площадки, альтернативные YouTube, с которых можно брать видео для вставки на лендинг. Например: Vimeo, VK-видео, Ru Tube, Дзен, Платформа.

Для установки видео на лендинг:

1. На выбранном видеохостинге нажмите под любым видео кнопку поделиться (share) и скопируйте предоставленный код, записанный через iframe.

  • На VK-видео: «Поделиться» - вкладка «Экспортировать» - «Код для вставки».
  • На Ru Tube: «Поделиться» -  «Код вставки плеера».
  • На Дзен: «Поделиться» - «<> Встроить» - «Код публикации».
  • На Платформе: «Поделиться (значок со стрелочкой вверх)» - «<>» - «Копировать».

Для установки кода с Vimeo в видео-блок конструктора лендингов нужна лишь последовательность цифр, как с YouTube (после "https://player.vimeo.com/video/" и перед "?"). Код с Vimeo вставляется на лендинг в режиме «Детали».

2. Перейдите в конструктор лендингов и в режиме «Блоки», нажмите кнопку "<> html-код" на блоке с видео. В открывшемся редакторе вставьте код с VK-видео, Ru Tube, Дзен, Платформы (желательно предварительно сделав его адаптивным) вместо строки, начинающейся с <iframe... 

Адаптивный код 

Для того, чтобы вставленные видео подстраивались под разные размеры экрана и хорошо выглядели, как с компьютера, так и с мобильного, можно использовать следующий код для вставки в блок:

<div style="position: relative; padding-bottom: 56.25%; /* ratio 16:9 */ height: 0; overflow: hidden;">

<iframe src="https://vk.com/video_ext.php?oid=-220754053&amp;id=456241042&amp;hd=2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" allowfullscreen=""></iframe>

</div>

где только часть кода берется с видеохостинга: <iframe src="https://vk.com/video_ext.php?oid=-220754053&id=456241042&hd=2"

b264244d8e7f4dfa15ffbc620ab7cfcbb264244d8e7f4dfa15ffbc620ab7cfcb.png

Может быть интересно