Адаптивное видео на сайте в 1 строку (меняем высоту видео в зависимости от ширины экрана) на чистом CSS

Не первый день уже работаю с сайтом МЕДИА группы «РЕПОРТАЖ ТВ» и появилась интересная задача. Нужно менять высоту всех видео на сайте в зависимости от ширины экрана.

И в этом нам поможет довольно простой код (для плееров Ютуба, Вимео, Вконтакте):

iframe[src^="https://www.youtube.com"], iframe[src^="https://player.vimeo.com"], iframe[src^="//vk.com"] {width: 100%; height: 51vw;}

Где vw - это эквивалент 1% ширины окна браузера. Можете подобрать это число сами.

А если говорить понятнее, то у нас тут получается высота фрейма с видео в зависимости от ширины экрана! Очень классная относительная единица измерения. Правда, будет работать только в новых браузерах. Но тут нет ничего страшного. Для старых браузеров можно сделать 3 - 4 контрольные точки, где указать высоту в пикселях и в VW. Например, height: 472px; height: 51vw;

Видео можно растягивать по ширине (и менять ему высоту) только на мобильных устройствах:

@media screen and (max-width: 960px) {

Тут код для высоты видео.

}

Также, перед iframe[src можно добавить класс или ID контейнера, где находятся ваши видео. Мне кажется, это хоть и очень маленький, но прирост к производительности.

А как оптимизировать видео по google pagespeed?

Используем любой плагин lazy load для вашего движка. Для Вордпресса мне понравился «Lazy Load - Optimize Images». Но включал я его только для видео.

И да, прирост скорости по Гуглу - просто потрясающий. С 30% до 70 - 80%.