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

 2016-01-11 10:51

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

通过对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>
 上一篇  打赏 下一篇 
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: