欢迎光临
我们一直在努力

如何给网页添加iframe视频,内嵌视频响应式效果

在响应式设计的网页布局中有一些元素如果没有发挥好,直接损坏响应式设计的布局。其中iframe元素就是之一。如果需要用到iframe元素改怎么办呢?

目前主要有两种方法向网站中嵌入视频,一种是HTML5的video元素,但其在IE低版本中无法得到支持;另一种就是通过Flash,但其在iOS设备以及电脑上没有安装插件或者是浏览器支持flash的话是无法正常显示的。

以下就是Web前端开发给大家总结出对于iframe元素的响应式效果,希望能够帮助大家。代码如下:

HTML:

<div class="video-container"> 
<iframe src="fadlfkj.mp4" height="850" width="600" allowfullscreen="" frameborder="0"> </iframe> 
</div> 
为了能让嵌入的视频在Web中实现响应式效果,你需要在iframe标签外添加一个容器div来包裹他。然后在div盒子上添加class并命名为video-container。
CSS:
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }

 

赞(0) 打赏
未经允许不得转载:新起点博客 » 如何给网页添加iframe视频,内嵌视频响应式效果

评论 抢沙发

评论前必须登录!