不凡博客(Bufanz.com)
ZBlog/WordPress网站搭建
ZBlog/WordPress速度优化
ZBlog/WordPress插件定制
ZBlog主题模板定制、仿站
32624142(注明来意)

ZBlog文章插入B站视频的代码

ZBlog | 2021年05月24日09:55:58 | 阅读:85 | 评论:0

爱奇艺独家折扣,黄金VIP仅需99元

前言

  B站视频下方“分享”按钮有个嵌入代码,此代码直接复制粘贴到文章中,无法完美自适应宽高度。

视频代码和最终效果

ZBlog文章插入B站视频的代码

ZBlog文章插入B站视频的代码

代码如下

<div style="position: relative; width: 100%; height: 0px; padding-bottom: 66%;">
    <iframe src="视频地址" allow="fullscreen" allowfullscreen="" style="position:absolute;width:100%;height:100%;left:0;top:0;border:none;box-shadow:0 0 8px #e5e9ef;"></iframe>
</div>

代码中的<iframe src="的右边是视频地址,方法如下图。

ZBlog文章插入B站视频的代码

视频黑边问题

  视频上下的黑边比左右黑边宽,在代码中的第一行,右边的padding-bottom数值改大点,反之,改小点。

批量修改代码中数值的方法

《一键替换文章内容》的插件:bufanz.com/post/114.html

ZBlog文章插入B站视频的代码

插入B站视频的代码也可在WordPress使用,与ZBlog的效果一样。

淘宝购物先领券,更省钱

本文标题:ZBlog文章插入B站视频的代码

本文链接:https://bufanz.com/post/153.html

温馨提示:本文是作者 不凡 的原创文章,转载请注明出处和附带本文链接!

网友点评 展开评论

本文暂无评论 - 欢迎您

  • 文章

    158篇

  • 评论

    106条

  • 用户

    168位