将iframe包装在元素中

Question

我们的移动应用显示预格式化的html内容。内容可以包含来自YouTube的iframe。 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;
    }
}