Elementor添加Bilibili视频2种方法

本文介绍Elementor添加Bilibili视频2种方法，第一种是通过HTML代码插入Iframe，另外一种是通过插件实现，本文会对这2种方法做详细的介绍。

我自己也会在网站中添加B站视频，通常我使用的都是Iframe的方法，这种方法可以写一个全局的CSS代码，来控制样式，然后复制的Iframe代码中需要修改添加一个CSS类名。

第二个方法是我自己通过AI写了一个插件，实现在Elementor中添加一个Bilibili视频元素，这种可以像Youtube视频那样通过元素添加B站视频到页面中。

方法一：通过Iframe代码实现Elementor添加Bilibili视频

首先，添加一个HTML元素到Elementor页面中

HTML元素本身是一个代码元素，它没有任何编辑选项，你可以通过它在页面任意位置插入你需要的代码。

打开你要插入的B站视频，点击视频下方的分享按钮，在弹窗中选择并点击【嵌入代码】

这样你会复制到一个Iframe代码如下：

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113525229951748&bvid=BV1D9BeYEEVx&cid=26898729717&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

这段代码可以直接粘贴到Elementor HTML元素中，视频的展示是有问题的，视频的高度显示不全。

所以我们需要修改这段代码，添加一些参数设置，来控制视频的宽度和高度，同时设置视频不要自动播放。

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113525229951748&bvid=BV1D9BeYEEVx&cid=26898729717&p=1&autoplay=0" scrolling="no" border="0" height="400px" width="100%"  frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

以上代码添加了autoplay=0设置视频不要自动播放，height=”400px” width=”100%” 高度为400px，宽度为100%，但是以上的设置无法适配响应式效果。

如果你需要适配响应式，那么就需要写一个全局的CSS代码，同时为Iframe添加自定义CSS类。具体操作如下：

在网站外观自定义中

打开Additional CSS

在额外的CSS中添加代码并保存。

CSS代码如下：

/*B站视频全局样式*/
.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1080px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1140px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1440px) {
    .iframe_video {
        height: 40em;
    }
}

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

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

以上代码设置Iframe的默认样式，以及不同终端像素的高度（你可以根据自己的需求去修改高度值来匹配你展示的最佳效果）

完成之后，修改Iframe代码如下：

<iframe class="iframe_video"  src="//player.bilibili.com/player.html?isOutside=true&aid=113525229951748&bvid=BV1D9BeYEEVx&cid=26898729717&p=1&autoplay=0" scrolling="no" border="0"  frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

设置了全局的CSS宽度之后，就不需要在Iframe中设置宽度和高度，所以上面的代码删除了宽度和高度属性，同时需要Iframe代码的全局样式生效，需要给Iframe添加一个自定义类 class=”iframe_video” ，iframe_video就是类名，在CSS中设置它的风格。

保存之后可以查看视频的展示效果，你可以切换不同的终端查看展示的效果。

方法二：通过插件实现Elementor添加Bilibili视频

此方法相对方法一比较简单，可以设置视频的尺寸，控制其是否自动播放，还能够设置一些风格比如边框投影之类。

你可以通过GitHub下载elementor-bilibili-video插件

下载之后，通过上传插件包的方式安装激活插件（注意，此插件依赖Elementor插件，请先安全Elementor插件再安装此插件）

安装之后启动插件。

启用插件之后，你会在Elementor编辑器中的元素列表中找到Bilibili Video元素（它位于General分类中）

将元素拖拽到你想要的区域即可进行设置。

打开你要展示的B站视频，复制视频ID

将ID粘贴到Bilibili Video元素的ID位置，稍微等一会视频就会加载出来。

后续我也会继续完善一下这个插件。