Обернуть элемент iframe в элемент

Question

Наше мобильное приложение отображает предварительно отформатированный HTML-контент. Контент может содержать iframes с YouTube. Ширина iframe установлена ​​на 100%, но высота является проблемой. Если установлено фиксированное значение, оно не будет выглядеть правильно на телефоне, планшете, в альбомной ориентации ... и т. Д.

Я нашел решение https://css -tricks.com / NetMag / FluidWidthVideo / Article-FluidWidthVideo.php , но для этого требуется вставить iframe в другой элемент.

Приложение построено с использованием Angular 5 и Ionic

Пример iframe, которому требуется оболочка:

<iframe width="560" height="315" src="https://www.youtube.com/embed/lz1qtRK3ILg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Answer 1

Не уверен, что это лучшее решение, но оно работает для меня:

@media screen and (min-width: 480px) {
    iframe {
        height: 45vw;
    }
}