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 标签的父 div

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

1 个答案: