WordPress 文章内嵌入B站视频自适应

PetitQ WordPress教程 2022-4-27 1.02K 0 0

WordPress 文章内嵌入 B 站视频自适应，在 B 站上打开需要引用的视频页面，在视频播放器下方找到【分享图标】—>【选择嵌入代码】—>【复制文本内容】。

方法一

在 WorePress 文章编辑中，选择【作为 HTML 编辑】，粘贴刚才复制的 B 站嵌入代码，在其<iframe src 元素标签中增加 class 属性，如：

也想出现在这里？联系我们吧

<iframe class="iframe_video"src="//player.bilibili.com/player.html?aid=243829823&bvid=BV1Sv411i7KS&cid=209606589&page=1&high_quality=1&danmaku=0" width="100%" height="100%" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"> </iframe>

之后在主题模板 Css 全局样式文件中加入如下代码：

```
/*哔哩哔哩视频*/
```
```
.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:991px) {

```
    .iframe_video {
```
```
    height:20em;
```
```
}
```
```
}
```

@media only screen and (min-width:992px) and (max-width:1199px) {

```
    .iframe_video {
```
```
    height:30em;
```
```
}
```
```
}
```

@media only screen and (min-width:1200px) {

```
    .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
```
```
}
```

方法二

嵌入到 wordpress 文章中的 html 代码：

```
<div class="smartideo">
```
```
 <div class="player">
```

  <iframe src="//player.bilibili.com/player.html?aid=243829823&bvid=BV1Sv411i7KS&cid=209606589&page=1&high_quality=1&danmaku=0" width="100%" height="100%" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"> </iframe>

```
 </div>
```
```
</div>
```

放在 css 中的：

.smartideo { z-index: 0; text-align: center; background: #CCC; line-height: 0; text-indent: 0; }

.smartideo embed, .smartideo iframe { padding: 0; margin: 0; }

.smartideo .player { width: 100%; height: 500px; overflow: hidden; position: relative; }

.smartideo .player a.smartideo-play-link { display: block; width: 50px; height: 50px; text-decoration: none; border: 0; position: absolute; left: 50%; top: 50%; margin: -25px; }

.smartideo .player a.smartideo-play-link p { display: none; }

.smartideo .player .smartideo-play-button { width: 0; height: 0; border-top: 25px solid transparent; border-left: 50px solid #FFF; border-bottom: 25px solid transparent; }

.smartideo .tips { background: #f2f2f2; text-align: center; max-height: 32px; line-height: 32px; font-size: 12px; }

.smartideo .tips a { text-decoration: none; }

```
 
```
```
@media screen and (max-width:959px){
```

    .smartideo .player { height: 450px; }

```
}
```
```
@media screen and (max-width:767px){
```

    .smartideo .player { height: 400px; }

```
}
```
```
@media screen and (max-width:639px){
```

    .smartideo .player { height: 350px; }

```
}
```
```
@media screen and (max-width:479px){
```

    .smartideo .player { height: 250px; }

```
}
```

WordPress 文章内嵌入 B 站视频自适应

已有 254 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

WordPress 文章内嵌入B站视频自适应

方法一

方法二

WordPress 文章内嵌入 B 站视频自适应

相关文章

代码实现WordPress仪表盘调用站外文章列表

Google Captcha(reCAPTCHA)人机身份验证WordPress插件

WordPress分类页面如何只显示置顶的文章

发表回复取消回复

热销模板

WordPress教程

方法一

方法二

WordPress 文章内嵌入 B 站视频自适应

相关文章

发表回复 取消回复

热销模板

发表回复取消回复