我正在使用Bootstrap。
我有一个文本,其中包含2或3个基于iframe嵌入式视频。
此数据从数据库中提取。
我如何使这些iframe具有响应性?
示例代码:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
SOME TEXT SOME TEXT SOME TEXT SOME TEXT
<iframe src="http://youtube.com/...."></iframe>
</div>
</div>
这是一个动态数据。如何使其具有响应性?
7条答案
按热度按时间fd3cxomn1#
选项1
使用Bootstrap 3.2,您可以将每个iframe Package 在您选择的响应嵌入 Package 器中:
http://getbootstrap.com/components/#responsive-embed
选项2
如果你不想打包你的iframe,你可以使用FluidVids https://github.com/toddmotto/fluidvids。http://toddmotto.com/labs/fluidvids/
neekobn82#
拜托,看看这个,我希望能帮上忙
hc8w905p3#
最好的解决方案,对我来说很好。
您必须:将此代码复制到主CSS文件中,
然后将嵌入的视频放到
就是这样!现在你可以在你的网站上使用响应视频了。
q5lcpyga4#
因此,youtube给出了iframe标签如下:
在我的例子中,我只是把它改为width=“100%”,其余的保持原样。这不是最优雅的解决方案(毕竟,在不同的设备中,你会得到奇怪的比例),但视频本身不会变形,只是框架。
0g0grzrc5#
方案3
更新当前iframe
2lpgd9686#
2020年8月期间工作
用这个
使用一个纵横比
在iframe内使用选项
3lxsmp7m7#
您可以使用以下语法使iframe在Bootstrap 5中响应:
16x9以外的宽高比: