• 欢迎访问佰阅部落,本站为优质开源程序分享站,所有自研项目均开源免费,可在Github查看源码。 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎积极参与讨论、反馈问题

博客中使用iframe标签嵌入B站视频,PC手机自适应宽高

wordpress 佰阅部落 8个月前 (03-24) 1126次浏览 4个评论
文章目录[隐藏]

此处为技术问题,本站曾经试过文章内插入视频,测试发下,YouTube和OneDrive插入后非常完美的支持了,但是b站视频导入后就是一小块,非常不友好。

写博客的时候准备插入一个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的数字即可。

最终效果如下:

PC端效果

博客中使用iframe标签嵌入B站视频,PC手机自适应宽高

移动端效果

博客中使用iframe标签嵌入B站视频,PC手机自适应宽高

更多精彩,请右转佰阅商城


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:博客中使用iframe标签嵌入B站视频,PC手机自适应宽高
赞一下 (0)
佰阅部落
关于作者:
爱折腾,爱学习,我是一个Docker菜鸟,用心分享各种实用搭建教程,让优质web程序脱颖而出,欢迎订阅!

您必须 登录 才能发表评论!

(4)个小伙伴在吐槽
  1. 感谢分享
    匿名2019-08-10 12:25 Windows 7 | Chrome 69.0.3497.92
  2. 我在查看网页 F12 源码的过程中发现 style="Height:",正常的是有这个参数,而我的不正常那个是没有这个参数信息的,请教一下 这个要怎么解决
    huozk2019-05-15 14:48 未知操作系统 | 未知浏览器
  3. 你好,非常感谢您的文章;我在使用的过程中发现一点问题想要请教您:在同一片文章中插入第一个视频的时是正常的,但是如果插入第二个或第三个视频,这个视频就不适用于这种自适应了。这是演示地址:https://huozk.com/2017/unity3d-adam.html 请教下您这是什么问题?
    huozk2019-05-15 14:40 未知操作系统 | 未知浏览器
    • 你试下第一个嵌入视频里带iframe和script标签。后几个只保留iframe标签
      佰阅部落2019-05-16 16:41 未知操作系统 | 未知浏览器