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

在B站上打开需要引用的视频页面,在视频播放器下方找到【分享图标】—>【选择嵌入代码】—>【复制文本…

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

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

在WorePress文章编辑中,选择【作为HTML编辑】,粘贴刚才复制的B站嵌入代码

在其<iframe src元素标签中增加class属性,如:<iframe class=”iframe_video” src

之后在主题模板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技巧

本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。

评论 (0)COMMENT

登录 账号发表你的看法,还没有账号?立即免费 注册