Question

我正在使用Bootstrap将响应式嵌入的Yotube视频嵌入到监视器的响应图像中。这在我的桌面上工作正常，但在特定分辨率（787x1000和995x1139之间的任何内容）上，视频无法在图像上正确显示。有没有办法克服这个问题？

以下是我在JsFiddle上的工作样本：

这是我的代码：

<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%;
}

Answer 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像素以下，根据border-box model，具有col-md-7类的div的大小将设置为其父级的100％。（在你的情况下100％的视口）

对于例如800px的屏幕宽度，视频宽度将为800 px（= 680）的85％，而背景图像将不大于max-width:100%设置的原始尺寸（505px） img-responsive类

在图像中嵌入Youtube视频

1 个答案: