Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2020 год

RSS лента новостей, Подписка по Email

Адаптивное видео на сайте в 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%.