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

目录 CSS2017年4月4日

iframe

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

@media查询实现自适应

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

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

  1. <div class="iframevideo"><iframe></iframe></div>

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

  1. .iframevideo { width: 100%; height: 500px; }
  2. @media only screen and (max-width:959px){
  3.     .iframevideo { height: 450px; }
  4. }
  5. @media only screen and (max-width:767px){
  6.     .iframevideo { height: 400px; }
  7. }
  8. @media only screen and (max-width:639px){
  9.     .iframevideo { height: 350px; }
  10. }
  11. @media only screen and (max-width:479px){
  12.     .iframevideo { height: 250px; }
  13. }

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

  1. .iframevideo .iframe {margin:0 auto;}  

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

巧用padding实现自适应

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

实现方法

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

  1. <div class="selfadapting-video">
  2.   <iframe src=""   frameborder="0"></iframe>
  3. </div>

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

  1. /* 这个规则规定了iframe父元素容器的尺寸，16:9的近似值为56%*/  
  2. .selfadapting-video {   
  3.   position: relative;
  4.   width: 100%;
  5.   height: 0;
  6.   padding-bottom: 56%; /* 高度应该是宽度的56% */
  7. }   
  8.   
  9. /* 设定iframe的宽度和高度，让iframe占满整个父元素容器 */
  10. .selfadapting-video iframe {   
  11.   position: absolute;
  12.   width: 100%;
  13.   height: 100%;
  14.   left: 0;
  15.   top: 0;
  16. }  

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

视频测试

无自适应

iframe视频设置固定的高度，在不同分辨率下能实现宽度100%，但是高度都是一样的，这就造成电脑端视频窗口正常，到了移动端高度就显示的太高了。

 

自适应

同一个视频采取上述第二种方法实现自适应，把视频固定宽高比，可以在多种分辨率率下测试，效果如下图：

暂无评论

发表评论