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

【问题标题】：Youtube Embedded video on different mediaYoutube 在不同媒体上的嵌入视频
【发布时间】：2013-12-17 07:53:17
【问题描述】：

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

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

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

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

谢谢你

【问题讨论】：

如果将它放在“响应式”div 中并从 iframe 标记中删除 with 和 hight 会发生什么？它不应该跟随它的父母吗？
可能重复：stackoverflow.com/questions/15844500/…
@Deximat 谢谢.. 已解决:)

标签： html css video youtube

【解决方案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 p>

【讨论】：