Обернуть тег iframe (или любой тег) в div
Решение по автоматическому обертыванию тегов iframe (или любых других тегов) в div.
Дата публикации
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
Время запросов: 0,1339 s
Количество запросов: 25
Источник: cache