Как сделать видео с youtube адаптивным на вашем сайте

02.03.2016

Чтобы окно с видео встроенного с youtube подстраивалось под размеры окна браузера, добавим пару стилей и скрипт.

Добавим такой скрипт, чтобы помещать наше видео в родительский блок с классом .video-wrap

$('.content iframe').wrap('<div class="video-wrap"></div>');

Добавим такие стили для родительского блока .video-wrap и помещенного в него видео:

.video-wrap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.video-wrap iframe, .video-wrap object, .video-wrap embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Теперь какого бы размера видео вы не вставили на сайт, оно всегда будет занимать 100% по ширине и ничего лишнего не будет занимать по высоте.

Полезная инфа:

Оставить комментарий