Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один скрипт JS. Таким образом можно сделать адаптивным любое видео:
- видео с youtube;
- видео с vimeo;
- видео в
iframe
; - видео в
object
; - видео в
embed
; - видео в теге
<video>
; - и любые другие.
Адаптивное видео на сайте
Добавим такой скрипт, чтобы помещать наше видео в родительский блок с классом .video-wrap
(скрипт этот нужен только, если у вас на сайте много таких видео или нет возможности вручную поместить видео внутри блока .video-wrap
, особенно он удобен для сайтов на CMS WordPress):
$('iframe').wrap('<div class="video-wrap"></div>');
По итогу, разметка должна быть примерно в таком виде:
<div class="video-wrap"> <iframe src="https://www.youtube.com/embed/VAIPaMnSBEc" allowfullscreen></iframe> </div>
Добавим такие стили для родительского блока .video-wrap и помещенного в него видео:
.video-wrap { position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; } .video-wrap iframe, .video-wrap object, .video-wrap embed { position: absolute; left: 0; top: 0; height: 100%; width: 100%; }
Теперь какого бы размера видео вы не вставили на сайт, оно всегда будет занимать 100% по ширине и ничего лишнего не будет занимать по высоте, а на мобильных телефонах не будет выходить за экран или растягиваться/сжиматься.