最近,在网页中测试调用优酷视频,但是优酷视频分享之后的html代码自带宽和高,不是响应式,经过搜索和多种方法测试,测试了Bootstrap框架下video视频的插入,发现通过 div和 iframe可以轻松实现视频的插入。


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


<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="优酷视频地址"></iframe></div><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="优酷视频地址" allowfullscreen="" class="embed-responsive-item" frameborder="0" height="498" width="510"></iframe></div>


备注:记得给宽高代码删除,引入bootstrap样式。在此讲调试学习记录代码纪录在此,做个备忘,供站长和前端朋友们学习。

点赞(1) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部