Bootstrap嵌入响应式视频（可无障碍浏览）的方法

Bootstrap嵌入响应式视频（可无障碍浏览）的方法

 2016-01-11 10:51    网页设计   标签：Bootstrap 代码   5845    发表评论

昨晚，我测试了下Bootstrap框架下video视频的插入，发现通过 div和 iframe可以轻松实现视频的插入，效果详见《“他怎么那么红” 相声瓦舍和德云社一样能讲传统相声》。

通过对Bootstrap的学习，我发现，只要通过它原有代码就可以做到了，原Bootstrap插入的video视频的方法如下：

<!-- 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>

原方法中，通过.embed-responsive来组成基本框架的构建，然后再通过<iframe>、<embed>、<video>、<object>插入视频，加上.embed-responsive-item标签就可以了，整个方法还是比较简单的。另外.embed-responsive-16by9和.embed-responsive-4by3是两个来区分视频比例的参数。

那篇文章中插入代码如下：

<div style="text-align: center;" class="embed-responsive embed-responsive-4by3">
    <iframe src="http://player.youku.com/embed/XMTMyOTQ4MjEzMg==" allowfullscreen="" class="embed-responsive-item" frameborder="0" height="498" width="510"></iframe>
</div>