WordPress嵌入视频宽高如何自适应?

这段时间在网站嵌入了b站的视频,但是出现问题如下:

视频显示不完整

上面第一个是设置了iframe标签的宽度和高度,类似:width:100%;height:100%,但实际效果就是这样,宽度确实自适应了,但是高度出现问题。高度设置为:600之后PC看到的是正常的,移动端展示出来视频高度也是600,高的太过离谱,这里给的高度并不能起到自适应的效果~ 这个视频在页面中就被拉扯变形了,蓝受!

度娘说用javascript来进行控制,这个。。。。我不会JS,溜了溜了

解决方法:把以下css文件,放到网站使用的样式表文件的最后。

.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

然后在发布文章时,切换至html标签,在视频标签,iframe,或object,或embed的上级html标签中(对比上面的css文件层级),加入class=”video”即可。例如,上级标签是<p>:

<p class=”video“><iframe src=”https://v.qq.com/iframe/player.html?vid=v06363imof8&amp;tiny=0&amp;auto=0″ frameborder=”0” allowfullscreen=”allowfullscreen“></iframe></p>

刷新网站的样式文件及页面,发现变了!完美解决问题~

发表评论