html - 不同媒体上的 Youtube 嵌入式视频

Question

我正在尝试在我的响应式网站上创建一个 Youtube 嵌入式视频。 因为我使用的是 3 媒体屏幕(用于手机、平板电脑和个人电脑/笔记本电脑)。问题是当我嵌入这段代码时

<iframe width="560" height="315" src="//www.youtube.com/embed/kHqY2Bkva7A?rel=0" frameborder="0" allowfullscreen></iframe>

它在桌面上运行良好，因为宽度分辨率大于 560。但是，当我用手机打开它时，它就变成了灾难，因为最大宽度是 480。

谁能帮忙解决这个问题？我也可以让 YouTube 嵌入式视频响应吗？

谢谢你

Answer 1

CSS:

.iframe-parent-div {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}


.iframe-parent-div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

将'iframe-parent-div'类添加到iframe标签的parent div