html – Bootstrap响应式嵌入视频占据了屏幕的整个宽度和高度

html – Bootstrap响应式嵌入视频占据了屏幕的整个宽度和高度,第1张

概述我一直在尝试将视频嵌入bootstrap网站. 但是当我这样做时,它占据了屏幕的整个宽度和高度.我希望它在台式机上是560px x 315px,当桌面尺寸低于560px时它应该是响应的. 我用过: <div class="container-fluid"> <div class="embed-responsive embed-responsive-16by9 div_style"> 我一直在尝试将视频嵌入bootstrap网站.

但是当我这样做时,它占据了屏幕的整个宽度和高度.我希望它在台式机上是560px x 315px,当桌面尺寸低于560px时它应该是响应的.

我用过:

<div >    <div >        <iframe  src="http://www.youtube.com/embed/XGSy3_Czz8k" wIDth="560" height="315" frameborder="0" allowfullscreen></iframe>    </div></div>

当我尝试通过添加div_style类来自定义div标签时max-wIDth:560px;和最大高度:315px;,它将视频宽度更改为560px,但高度占用整个页面高度.

解决方法 您错过了添加col-xs-12 col-sm-6 col-md-4 col-lg-2.像这样的东西.

<div >    <div >        <div ID="foxnews">            <iframe  src="https://www.youtube.com/embed/KFGbHBbXG_g?modestbranding=1&amp;autohIDe=1&amp;showinfo=0&amp;rel=0" allowfullscreen="true"></iframe>        </div>    </div></div>
总结

以上是内存溢出为你收集整理的html – Bootstrap响应式嵌入视频占据了屏幕的整个宽度和高度全部内容,希望文章能够帮你解决html – Bootstrap响应式嵌入视频占据了屏幕的整个宽度和高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1047192.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存