WordPress文章内嵌入B站视频自适应
在B站上打开需要引用的视频页面,在视频播放器下方找到【分享图标】—>【选择嵌入代码】—>【复制文本…
在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 删除。
还没有任何评论,赶紧来占个楼吧!