Дата публикации
28 Апреля 2019
Дата изменения
4 Июля 2020
Уникальных просмотров
1.892

Простое решение для оборачивания тегов iframe, object и embed (да и собственно любых тегов), в div с классом.

iframe и youtube во всю ширину

Как сделать адаптивные видео в контенте? Легко! Нужно применить несколько CSS стилей и небольшой кусок кода jQuery.

CSS стили, с помощью которых iframe, object и embed теги будут растягиваться во всю ширину экрана.

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Ну и jQuery код, предельно простой. На всякий случай показал как оборачивать не все iframe, а только из определенного источника.

// Wrap all iframe
$(function () {
    $('iframe').wrap("<div class='video-wrapper'></div>");
});

// Wrap all iframe with src "youtube" in .content wrapper
$(function () {
    $('.content iframe[src*="youtube"]').wrap("<div class='video-wrapper'></div>");
});

После этого, все видео должны оборачиваться в блок video-wrapper и растягиваться во всю ширину при рендере страницы.

Благодарность автору

Если по какой-либо причине вы хотите поблагодарить автора данного ресурса, вы можете это сделать одним из удобных для вас способов ниже.

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1339 s
Время запросов: 0,1339 s
Количество запросов: 25
Источник: cache