响应视频的默认大小

我有一个网站使用引导和我的网页的核心我有一个图片，下面是一个YouTube视频内嵌：响应视频的默认大小

<div class="col-xs-12 col-sm-12"> 

     <a href="tech.php"> 
     <img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200" height="600"> 
     </a> 

     <br> 

     <div class="embed-responsive embed-responsive-16by9"> 
     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTwv1Dn2rYQ" width="300" height="150" frameborder="0" autoplay=1 allowfullscreen></iframe> 
     </div> 

    </div>

Link to website here.

当我第一次加载此页我看到这个解决方案（并且不喜欢）是我的视频延伸到我的屏幕下方。所以我想通过一种方式将我的图片和视频的大小作为屏幕大小的比例进行说明，以便我的视频调整大小以保持在屏幕边界内。

我在网上寻找想法（即css编辑as in here），但我迷路了，或者它没有达到我所期望的。

有什么想法？

来源

2016-11-25 arennuit

如果您只想使用css并将您的标题图像和嵌入式视频保留在折叠内，则可以在大分辨率上为.container类指定较小的宽度。如果用970px替换1170像素，则这两个元素都将在最大化浏览器窗口的折叠范围内保持可见。 – mihaidp

如果您只是添加一个CSS条目来指定视频的最小高度，它将不会在加载时剪辑它，并且bootstrap会在调整大小时保持它的比例。代码：

.embed-responsive{ 
    min-height:100%; 
}

当然，你可能会想要更具体一点针对div，但我认为这应该做你以后的事情。

来源

2016-11-25 16:09:54 flouc001

我会去这个不同，我不会使用绝对定位的元素的视频，我会设置一个height或min-height使用视台vh

因此，它可能看起来像：

#youtube-video { 
    width: 100%; 
    min-height: 40vh; 
}

并删除该元素上的所有绝对位置。

另外，你可能要设置顶部容器上的ID或类，并给它一些margin-top来抵消你的固定头：

#top-container { 
    margin-top: 50px; 
}

最后，我将完全通过移动移动引导容器外的footer</div>要高于您的footer。

<div class="container"> 
.... 
</div> 
<footer class="footer"> 
... 
</footer>

来源

2016-11-25 16:27:12 packetdrop

响应视频的默认大小

回答

相关问题