WordPress 引用Bilibili视频自适应

目前国内大多数视频网站都提供了分享的途径，对于嵌入到其他网页的分享大多采用iframe。iframe是HTML的一个标签，它支持在HTML页面中以框架的形式显示来自其他网页的内容。通过使用iframe，你可以把来自视频网站的播放器嵌入到你的网页。主要讲的是如何在网页中嵌入来自哔哩哔哩的视频。但是有个严重的问题就是无法实现自适应。下面带来解决方法。

打开wordpress后台在外观中找到自定义

添加额外CSS

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

定义完CSS，打开你要插入的b站视频，点击分享

复制嵌入代码

然后在文章中插入一个html

<div class="aspect-ratio">
<iframe src="https://player.bilibili.com/player.html?aid=29893861&cid=52067422&page=1&as_wide=1&&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>//你的嵌入代码
</div>

示例：