在WordPress中插入视频并设置自适应高度

在WordPress中插入B站视频的时候，没有办法根据窗口大小自适应高度，固定高度的话，在不同的设备上观看不能达到最好的效果，所以我找了一下通过CSS调整自适应高度的方法。

首先在B站获取视频的嵌入代码：

获取的嵌入代码如下：

1

<iframe src="//player.bilibili.com/player.html?aid=79510590&bvid=BV1tJ41167Ai&cid=136031636&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

直接嵌入这个代码就会出现播放窗口非常小，而且无法根据页面大小自适应高度的问题。

根据CSS如何让iframe实现自适应高度的效果这篇文章，我将嵌入代码做如下修改：

1
2
3
4

<div class="bili">
    <iframe src="//player.bilibili.com/player.html?aid=79510590&amp;bvid=BV1tJ41167Ai&amp;cid=136031636&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="bilibili">
    </iframe>
</div>

将整个iframe放入一个div层里，通过div的大小来控制iframe的大小。div和iframe通过class类来选择，在css文件中插入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

.bili {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.bilibili {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bili的样式：

position: relative和iframe的位置在这里非常重要。position: relative以便稍后我们可以将iframe与div相关联。这是因为在CSS中，position: absolute基于最接近的非静态父元素定位元素。

overflow: hidden 是否隐藏任何可能放在容器外面的元素。

padding-top: 56.25%这就是关键所在。在CSS中，padding-top属性可以设置百分比，这使我们的iframe保持正确的比例。通过使用百分比，它将根据元素的宽度计算要使用的填充。在我们的示例中，我们希望保持56.26％的比率，也就是按16：9的宽高比。根据视频的宽高比，也可以采用75%的比率，也就是4：3。

.bilibili的样式：

position: absolute;这将为iframe提供相对于包装器的位置，并将其放置在包装器的填充上。

top: 0并left: 0用于将iframe定位在容器的中心。

width: 100%并且height: 100%使IFRAME采取所有包装的空间。

完成后，就可以得到一个自适应的iframe。

便于以后多次使用，我把css代码做一个修改,增加特定比例的类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.bili16-9 {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.bili4-3 {
    position: relative;
    overflow: hidden;
    padding-top: 75%;
}

.bilibili {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Html代码相应修改为：

1
2
3
4

<div class="bili16-9">
    <iframe src="//player.bilibili.com/player.html?aid=79510590&amp;bvid=BV1tJ41167Ai&amp;cid=136031636&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="bilibili">
    </iframe>
</div>

这样，即使以后需要添加其他宽高比的视频，也可以很方便的修改代码，而不会对以前插入的视频造成影响了。

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章