Как сделать iframe ютубе адаптивным ?

В этой ветке создаем темы по настройке лент WPGrabber.

Модератор: Admin

Ответить
Сергей Владимиров
Сообщения: 2
Зарегистрирован: 07 апр 2022, 15:03

Как сделать iframe ютубе адаптивным ?

Сообщение Сергей Владимиров » 07 апр 2022, 15:49

Доброго времени суток. Почти всем участникам форума известна лента для парсинга видео из Ютубе. Проблема в том что вовремя парсинга берется iframe код плеера для вставки в пост и этот iframe не адаптивный. Для теста Я добавил CSS код в тему и ручным способом обернул iframe код Ютубе в класс и вставил код ифраме с классом в пост как кастомный HTML код и все, в этом посту ифраме код (плеер) стал адаптивным. Добавил этот класс в ленту (лента: https://transfiles.ru/llzgj) но несработало.

Мне нужно решение такое что бы этот iframe код Ютубе автоматически вовремя парсинга стало адаптивным: возможно ли это сделать ? Буду благодарен за любое работающие подсказку-решение.

Это было для моего тестогого поста в ручную (просто создал пост, не использовал впграббер):

Custom HTML (внутри поста):

<div class="iframe-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/bduECEfvCng" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>

CSS (добавил в Additional CSS темы):

.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

Ответить