CSS实现iframe视频高度自适应的两种方法

CSS实现iframe视频高度自适应的两种方法

iframe视频插入到网页中会遇到高度适应的问题,手机端浏览器显示的iframe视频窗口比例失调,这是由于height="100%"并不奏效,width的值可以用百分比数值实现自适应,但是高度只能设置具体数字,js应该可以实现自动获取iframe高度并动态写入,但本文介绍一下用css实现iframe高度自适应的办法。

@media查询实现自适应

使用 @media 查询,可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

当插入iframe视频代码时。在其上面嵌套一个div标签,其中iframe代码需要去掉其可能存在的宽高度的像素值并设置其width=“100%”、height=“100%”如下面所示:

在主题的样式文件中加入下面如下代码即可实现不同分辨率下高度的自适应:

    .iframevideo { width: 100%; height: 500px; }
@media only screen and (max-width:959px){
    .iframevideo { height: 450px; }
}
@media only screen and (max-width:767px){
    .iframevideo { height: 400px; }
}
@media only screen and (max-width:639px){
    .iframevideo { height: 350px; }
}
@media only screen and (max-width:479px){
    .iframevideo { height: 250px; }
}

如果不是width="100%",可以设置添加以下代码让iframe视频居中显示,width="100%"时居中可有可无。

.iframevideo .iframe {margin:0 auto;}

缺点:由于css设定的高度值在某个范围都是固定的,iframe视频窗口自适应并不是那么完美,并且视频窗口并不能完美切合视频,总是留有上下或左右的黑边,但这是个小问题,视频基本上实现的自适应效果还是不错的。

巧用padding实现自适应

现在的视频有一个常用的16:9的比例,要是我们能把iframe视频的宽高比固定下来,即不管width如何变化height都与之保持比例,这样在不同分辨率下也就实现了自适应。这种方法能够实现自适应是利用了padding属性的一个有趣的百分比值特征。

实现方法

我们在给插入的iframe视频嵌套父级div标签,如下面代码所示:

<div class="selfadapting-video">
  <iframe src="" frameborder="0"></iframe>
</div>

在主题样式文件中加入下面的代码:

/* 这个规则规定了iframe父元素容器的尺寸,16:9的近似值为56%*/  
.selfadapting-video {   
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%; /* 高度应该是宽度的56% */
}   
  
/* 设定iframe的宽度和高度,让iframe占满整个父元素容器 */
.selfadapting-video iframe {   
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

视频的宽高比可以设置成你想要的比例,设置后在任何分辨率下都能保持比例。缺点:由于设定比例,以后插入的视频都是固定的这种比例,但是视频本身比例可能多种多样。虽然可以在插入视频时直接写入样式根据不同视频设定不同的宽高比,但这样有点麻烦,每次插入都要完整设置一遍css样式。

服务器运维网站运维

国内腾讯云CDN + 海外Cloudflare CDN 实现免费全球CDN加速

2019-7-8 12:56:49

前端开发微信小程序

简单几步 让你的WordPress网站对接微信小程序

2018-3-12 12:26:23

搜索