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

原创 新起点博客  2020-11-13 13:56 
【上云必备】上云仅?102/年

在响应式设计的网页布局中有一些元素如果没有发挥好,直接损坏响应式设计的布局。其中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。
.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%; }

 

本文地址:https://www.henenseo.com/archives/3985
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情