Как вставить код видео с YouTube на сайт, чтобы было удобно для пользователя

Добавляю нижеприведенный код в стили темы (файл css). Он позволяет не задавать размер вставляемого видео, автоматически подстраиваясь под область контента. Отлично работает на десктопе и мобилках.

Код и стили для вставки видео Ютуб на сайт
.thumb-wrap {
position: relative;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}
.thumb-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Так как у меня тема Reboot от WpShop, то мне не надо лезть в сам файл стиля. Все делается из админки. Перехожу во Внешний вид ⇒ Настроить ⇒ Дополнительные стили и вставляю нужный мне код. Применяю изменения.

Если у вас в теме нет такой функции, то придется редактировать сам файл стилей.

Далее переходим из визуального в текстовый редактор. Выбираем место и копируем нижеприведенный код ⇒

<div class=»thumb-wrap»><iframe  src=»https://www.youtube.com/embed/x2VCAmEeeDwСюда вставляете свой идентификатор видео. » frameborder=»0″ allowfullscreen=»allowfullscreen»></iframe></div>

Копируем нужный вам идентификатора видео ютуба  и вставляем его, вместо кода в примере.

Скопировать его можно перейдя в Ютуб ⇒ внизу ролика нажать ссылку ПОДЕЛИТЬСЯ ⇒ и далее ВСТРОИТЬ.

Все, теперь любое загруженное с YouTube видео, у вас будут сжиматься и растягиваться и по длине и по высоте, подстраиваясь под размер экрана пользователя. Видео станет адаптивным.

Этот способ позволяет избавиться от таких параметров, как width=»560″ height=»315″, которые на разных шаблонах приходиться менять, чтобы видеоролик отображался корректно, а не был растянут или сильно сжат.

Так же это отлично работает на мобильных гаджетах, на которых все корректно уменьшается и расширяется.

Это большой плюс для улучшения поведенческих факторов сайта. Если пользователю будет удобно смотреть на вашем сайте, то ему не зачем уходить на ютуб и запускать это же видео там.

Как это работает, вы можете посмотреть практически в любой статье этого сайта.

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

Данную возможность я использовал пока только в одной своей статье про форм-факторы материнских плат.

Тут уже используется такой код, в котором есть параметры ⇒

  • start — отвечает за время начала проигрывания видео;
  • end — за окончание проигрывания.

<div class=»thumb-wrap»><iframe src=»https://www.youtube.com/embed/oSQW0T_CiKs?start=80&amp;end=115″ frameborder=»0″ allowfullscreen=»allowfullscreen»></iframe></div>

Время в этих параметрах указывается в секундах. Например, вы просмотрели видео и нужный фрагмент начинается со 2 минуты 20 секунды (60+60+20=140 сек). Значит в параметр start ставим цифру 140. Окончание нужного видеофрагмента в 3 минуты 10 секунд (60+60+60+10=190 сек). Ставим в end 190 сек.

При заходе пользователя на страницу с таким видео, первый его просмотр начнется именно с указанного вами отрезка. Если он его запустить заново на вашем сайте, то просмотр начнется уже с самого начала.

Значения атрибутов в теге iframe

С помощью тега <iframe> создается плавающий фрейм, который является своего рода контейнером, позволяющим загружать содержимое другой веб-страницы.

Атрибуты тега ⇒

  • width – цифровое значение, которое задает длину окна фрейма;
  • height – цифровое значение, которое устанавливает высоту окна плавающего фрейма;
  • src – полный путь к файлу, содержимое которого будет воспроизводиться;
  • frameborder – устанавливает или убирает отображение рамки вокруг фрейма. Поддерживаются значения — yes или no, 1 или 0 (нет);
  • allowfullscreen – разрешение на полноэкранное отображение видео.
Автор статьи и сайта
Александр
Александр
В 1998 году - первое знакомство с компьютером. С 2002 года постоянно развиваюсь и изучаю компьютерные технологии и интернет. Сейчас военный пенсионер. Занимаюсь детьми, спортом и этим проектом.
Задать вопрос

 

Оцените статью
( Пока оценок нет )
FIXX.ONE
Оставьте ваш отзыв или комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.