在响应式设计的网页布局中有一些元素如果没有发挥好,直接损坏响应式设计的布局。其中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%; }
评论前必须登录!
注册