如何创建响应式嵌入视频
- 在是
<iframe>
, <embed>
, <video>
, 或者 <object>
设置 .embed-responsive-item
类,视频一般使用 <iframe>
- 媒体源在
<iframe>
的 src
属性中设置
- 显示比例可以是
.embed-responsive-16by9
或者 .embed-responsive-4by3
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>提示!</strong> 改变浏览器的大小可以看到响应式图片如何工作
</div>
<h2>16:9 视频比例</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//player.youku.com/player.php/sid/XMTA4MzgxNDQ4/v.swf"></iframe>
</div>
<hr>
<h2>4:3 视频比例</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//player.youku.com/player.php/sid/XMTA4MzgxNDQ4/v.swf"></iframe>
</div>