Добавляю нижеприведенный код в стили темы (файл css). Он позволяет не задавать размер вставляемого видео, автоматически подстраиваясь под область контента. Отлично работает на десктопе и мобилках.
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&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 – разрешение на полноэкранное отображение видео.
