在图像中嵌入 Youtube 视频答案

【问题标题】：Embed Youtube video inside image在图像中嵌入 Youtube 视频
【发布时间】：2014-11-13 16:34:32
【问题描述】：

我正在使用 Bootstrap 将响应式嵌入 Yotube 视频嵌入到显示器的响应式图像中。这在我的桌面上运行良好，但在特定分辨率（787x1000 和 995x1139 之间的任何分辨率）下，视频无法正确显示在图像上。有什么办法可以克服吗？

这是我在 JsFiddle 上的工作示例：

http://jsfiddle.net/t6jr6bzc/1/

这是我的代码：

<div class="container-fluid" id="primapagina">
<div class="row" style="width: 100%;">
      <div class="col-md-7">
            <img src="https://googledrive.com/host/0B55_4P6vMjhITlB1VzJCZnRBUGc/monitor.png" class="img-responsive">
            <div id="video">
                <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/ldxJMRrQxEA"></iframe>
                </div>
            </div>

还有 CSS：

#video{
width: 85%;
margin-top: -69%;
margin-left: 7.5%;
}

【问题讨论】：

请发布有问题的相关代码的代码示例。如果你可以在 jsfiddle 或 bootply 上模拟它，那就更好了。如果您需要解决方案，必须提供代码。
我添加了一个 JSFiddle

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我为您的问题找到了两种可能的解决方案：

将col-md-7 类替换为col-xs-7，或者（在小屏幕上将图像的宽度设置为视口的0.5833）
删除 img-responsive 并将 img {width:100%} 添加到您的 CSS（这会将您的图片放大到大于其原始尺寸）

说明：col-md-7 仅在您的屏幕宽度大于 992 像素时应用，请参阅：http://getbootstrap.com/css/#grid。

在 992 像素以下，col-md-7 类的 div 的大小将根据 border-box model 设置为其父级的 100%。（在您的情况下为 100% 的视口）

对于例如 800 像素的屏幕宽度，您的视频宽度将是 800 像素 (=680) 的 85%，而您的背景图像不会大于由 max-width:100% 设置的原始尺寸 (505 像素) img-responsive类

【讨论】：