我正在使用Bootstrap。
我有一个包含2或3个基于嵌入视频的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>
这是一个动态数据。我怎样才能使它响应?
选项1
使用Bootstrap 3.2,你可以用你选择的响应式嵌入包装器包装每个iframe:
http://getbootstrap.com/components/responsive-embed
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
选项2
如果你不想包装你的iframe,你可以使用FluidVids https://github.com/toddmotto/fluidvids。查看这里的演示:http://toddmotto.com/labs/fluidvids/
<!-- fluidvids.js -->
<script src="js/fluidvids.js"></script>
<script>
fluidvids.init({
selector: ['iframe'],
players: ['www.youtube.com', 'player.vimeo.com']
});
</script>
请看看这个,希望对你有帮助
<div class="row">
<iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
</iframe>
</div>
最适合我的解决方案。
你必须:将这段代码复制到你的主CSS文件
.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
然后把嵌入的视频放到
<div class="responsive-video">
<iframe ></iframe>
</div>
就是这样!现在你可以在你的网站上使用响应式视频了
那么,youtube给出的iframe标签如下:
<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>
在我的情况下,我只是把它改为width="100%",其余的保持原样。这不是最优雅的解决方案(毕竟,在不同的设备上,你会得到奇怪的比例),但视频本身不会变形,只是帧会变形。
选项3
更新当前iframe
$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');
2020年8月工作
使用这个
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
使用一个宽高比
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
在iframe内使用options
<iframe class="embed-responsive-item" src="..."
frameborder="0"
style="
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
"
height="100%"
width="100%"
></iframe>
你可以使用下面的语法使iframes在Bootstrap 5中响应:
<div class="ratio ratio-16x9">
<iframe src="LinkHere" title="YouTube video" allowfullscreen></iframe>
</div>
16x9以外的宽高比:
<div class="ratio ratio-1x1">
<div>1x1</div>
</div>
<div class="ratio ratio-4x3">
<div>4x3</div>
</div>
<div class="ratio ratio-16x9">
<div>16x9</div>
</div>
<div class="ratio ratio-21x9">
<div>21x9</div>
</div>