写博客的时候准备插入一个B站视频，发现B站点击分享会提供iframe嵌入视频，直接复制代码。

<iframe src="//player.bilibili.com/player.html?aid=44020824&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

添加到了博客里，然而它默认的样式只有很小的一块，还需要手动添加width和height属性，手动设置了固定的宽和高之后，显示正常，本以为大功告成。结果发下移动端边框超出。

于是参考网上资料，有直接修改主题样式的，使之外嵌一个class样式，但是一直测试失败。尝试多次后，才找到合适的解决办法，使用也非常简单。

解决方法

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=44020824&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
<script type="text/javascript">document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";</script>

使用方法：

只需替换第一行中的数字ID44020824 即可，所以每次只需插入B站视频av/XXXXXX的数字即可。

博客嵌入可以自适应的b站视频相关推荐

零基础免费通过hexo+github快速搭建个人博客（超详细图解+B站视频讲解资源）
我的个人博客效果预览https://furfur-jiang.github.io/ 加载可能会比较慢,因为是挂载到github上的样式基于hexo-theme-matery主题 ,这个主题我特别喜 ...
github博客突然无法访问_紫菜头博客被DNS污染攻击关站
原标题:紫菜头博客被DNS污染攻击关站近日,网赚圈老牌博客"紫菜头博客"站长爆料,网站这阵子持续遭遇勒索攻击,随后网站域名也DNS污染,彻底被搞垮了,以后网站关站,不玩了,之前, ...
MIPCMS高仿博客一号博客/新闻/资讯自适应模版
模版基于MIPCMS系统做的,仿博客一号WP模版,模版适合PC和手机端,本模版通过MIP检测,各位朋友可以自行测试,这次模版不免费提供了,需要各位付个辛苦费10元就行了.右边扫描支付,支付点击博客右上 ...
html5 dash,使用 DASH.js 在 HTML5 应用程序中嵌入 MPEG-DASH 自适应流式处理视频
您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn. 使用 DASH.js ...
Mculover666的博客文章导航（嵌入式宝藏站）（2021.06.17更新）
一.MCU系列 1. 开发环境 [Keil MDK](一)Keil MDK 5.28 的下载.安装.破解 [Keil MDK](二)Keil MDK中芯片器件包的安装 [Keil MDK](三)Kei ...
如何使用hugo搭建个人博客（五）：添加站内搜索（gcse）
站内搜索推荐使用google custom search engine(gsce) gcse的使用方法强烈推荐阅读:Hexo博客优化配置之–为自己博客添加站内搜索关键部分: 下面介绍如何在crisp ...
博客文章导航（嵌入式宝藏站）（2023.2.20更新）
博主简介 Mculover666,一个喜欢玩板子的小码农,目前HFUT在读,热爱嵌入式/物联网这个领域,并专注于嵌入式软件开发! 坚持做自己热爱的事情.坚持做自己觉得有意义的事情,但问耕耘,莫问收获! ...
（超级详细教程）搭建自己的博客——从购买服务器到建站
闲话不多说,开始操作. 搭建自己的博客需要以下4步: 1.拥有自己的服务器我们可以选购云服务器,例如阿里云,腾讯云,百度云,华为云等等. 这里附上阿里云云翼计划链接阿里云云翼计划,学生党还是很划算的 ...
博客资源网小程序带流量主激励视频收益
介绍: 博客/社区/论坛/资源网/娱乐网/源码网小程序源码/带小程序流量主收益,流量做起来轻轻送送月赚几千元! 新增:金刚区支持跳转业务域名(个人小程序不支持)新增: wordpress后台公众号文章 ...

博客嵌入可以自适应的b站视频

解决方法

博客嵌入可以自适应的b站视频相关推荐

最新文章

热门文章