寒光博客

typecho文章挂载Bilibili视频响应式代码
效果 https://dxoca.cn/everyDay/59.html 方法 打开bilibili的某个视频...
扫描右侧二维码阅读全文
20
2019/08

typecho文章挂载Bilibili视频响应式代码

  1.  Home
  2. Text  
    3. Share to：

效果

https://dxoca.cn/everyDay/59.html

方法

打开bilibili的某个视频，然后如上图找到嵌入代码

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

复制嵌入代码添加到文章。
然后在给iframe 这个标签添加 class="iframe_video" iframe_video这个类名

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

之后就是添加样式css了

CSS

此处内容需要评论回复后（审核通过）方可阅读。

大功告成！

正文到此结束
本文作者：Author：     文章标题：typecho文章挂载Bilibili视频响应式代码
本文地址：https://www.dxoca.cn/front/257.html       百度已收录
版权说明：若无注明，本文皆为“Dxoca's blog （寒光博客）”原创，转载请保留文章出处。
Last modification：June 10th, 2020 at 11:22 am
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏

Leave a Comment

48 comments

  1. Udaipur Escort Service Google Chrome 110.0.0.0 Windows 10 印度 印度

    https://www.jeshika.com/bastar-escort
    https://www.jeshika.com/basti-escort
    https://www.jeshika.com/bathinda-escort
    https://www.jeshika.com/beawar-escort
    https://www.jeshika.com/beed-escort
    https://www.jeshika.com/begusarai-escort
    https://www.jeshika.com/belagavi-escort
    https://www.jeshika.com/bellary-escort
    https://www.jeshika.com/bemetara-escort
    https://www.jeshika.com/bengaluru-escort
    https://www.jeshika.com/betul-escort
    https://www.jeshika.com/bhadrak-escort
    https://www.jeshika.com/bhagalpur-escort
    https://www.jeshika.com/bhandara-escort
    https://www.jeshika.com/bharatpur-escort
    https://www.jeshika.com/bharuch-escort
    https://www.jeshika.com/bhavnagar-escort
    https://www.jeshika.com/bhilwara-escort
    https://www.jeshika.com/bhind-escort
    https://www.jeshika.com/bhiwani-escort
    https://www.jeshika.com/bhojpur-escort
    Reply
  2. Nith Google Chrome 86.0.4240.198 Windows 10 中国 湖北 潜江

    kan kan

    Reply
  3. 六月 Google Chrome 105.0.0.0 Windows 10 中国 江西

    感谢!
    Reply
  4. orangethink Google Chrome 71.0.3578.80 Windows 10 中国 广东

    来看看
    Reply
  5. 倦伏 Edge 100.0.1185.50 Windows 10 中国 河南 郑州

    我来啦！
    Reply
  6. ui Google Chrome 98.0.4758.102 Windows 10 中国 浙江 温州

    问问
    Reply
  7. gtxy27 Google Chrome 92.0.4515.131 Android 10 中国 江西 南昌

    感谢佬
    Reply
  8. gtxy27 Google Chrome 90.0.4430.210 Android 10 中国 江西

    感谢神佬
    Reply
  9. 一悲先生 Edge 90.0.818.62 Windows 10 中国 四川 眉山

    哇，慕名而来
    Reply
  10. Haokun Zhang Google Chrome 88.0.4324.182 Windows 10 阿联酋 阿联酋

    学习一下
    Reply
  11. Haokun Zhang Google Chrome 88.0.4324.182 Windows 10 阿联酋 阿联酋

    学习下
    Reply
  12. Hu-Teacher's Blog Google Chrome 88.0.4324.96 Windows 7 中国 重庆 重庆

    学习一下
    Reply
  13. Dream Safari 604.1 iPhone 中国 山东 临沂

    学习学习
    Reply
  14. yang Safari 605.1.15 Mac OSX Lion 10_15_7 中国 江苏 盐城

    学习
    Reply
  15. 罗非 Google Chrome 87.0.4280.66 Android 10 中国 云南

    牛逼
    Reply
  16. dsf Firefox 82.0 Windows 10 中国 福建 宁德

    这个厉害了
    Reply
  17. SoundJoys Google Chrome 78.0.3904.108 Windows 10 中国 江苏 淮安

    感谢分享
    Reply
  18. 1234666 微信 7.0.15.1680 Android 10 中国 河南 郑州
    该评论仅登录用户及评论双方可见
    Reply
  19. xiaoran QQ浏览器 10.6.4208.400 Windows 10 中国 河南 郑州

    受教了

    Reply
  20. ylty Google Chrome 63.0.3239.132 Windows 7 中国 广东 广州

    感谢分享
    Reply
  21. 白**网警 Google Chrome 81.0.4044.92 Windows 10 中国 云南 大理白族自治州

    康康|´・ω・)ノヾ(≧∇≦*)ゝ
    Reply
  22. Zyue Edge 83.0.478.64 Windows 10 中国 湖南 衡阳

    看看怎么做
    Reply
    1. 寒光博客 Google Chrome 83.0.4103.116 Windows 10 中国 青海 西宁
      @Zyue

      好的
      Reply
  23. 秋枫 Edge 18.18363 Windows 10 中国 贵州

    博主你好 请问一下 我按照教程发布了文章 那个视频怎么是小的啊 怎么改成你这种大的
    Reply
    1. 秋枫 Edge 18.18363 Windows 10 中国 贵州
      @秋枫

      https://s1.ax1x.com/2020/05/12/YU18Vf.png
      这是效果图 您看看
      Reply
      1. Dxoca Google Chrome 81.0.4044.138 Windows 10 中国 青海 西宁
        @秋枫

        你好 我刚进去你网站看了一下,我看到是你没有挂载css 或者css没有挂载成功 你检查一下css的挂载 弄好就好了~~|´・ω・)ノ
        Reply
        1. 秋枫 QQ 8.3.5.4555 Android 9 中国 浙江
          @Dxoca

          好的，谢谢，我一会看看
          Reply
  24. DylanLi Google Chrome 81.0.4044.122 Windows 10 中国 中国

    已转载 + 部分修改，并注明来源，蟹蟹٩('ω')و

    Reply
    1. DylanLi Google Chrome 81.0.4044.122 Windows 10 中国 中国
      @DylanLi

      文章地址：https://cloudguest.cn/archives/258/
      ( ๑´•ω•) "(ㆆᴗㆆ)
      Reply
  25. 丨浅笑安然丨 Edge 81.0.416.68 Windows 10 中国 江苏 泰州

    手机怎么改清晰度
    Reply
  26. michael Google Chrome 80.0.3987.122 Windows 7 中国 山东 聊城

    请问最后这个CSS ，需要怎么修改？？小白，请大佬指点
    Reply
    1. dxoca QQ 8.3.0.4480 Android 9 中国 青海
      @michael

      写到页面挂载的css里或者 内嵌式和代码放一起呗
      Reply
  27. 一只小物块 Edge 79.0.309.71 Windows 10 中国 山东 青岛

    用上，理论上来说不仅仅是这个，都可以吧
    Reply
    1. dxoca QQ 8.3.0.4480 Android 9 中国 青海
      @一只小物块

      是的
      Reply
  28. Naiel Google Chrome 78.0.3904.108 Android 9 中国 广东 深圳

    你这转载把自己名字都写上去了啊。
    Reply
    1. dxoca QQ 8.3.0.4480 Android 9 中国 青海
      @Naiel

      我不是原创吗？？ 怎么成转载了...OωO
      Reply
  29. 周星星 Firefox 68.0 Windows 10 中国 河南 焦作

    博主，我想问一下：怎么设置才能使引用过来的视频的清晰度 默认画质最优的？
    Reply
    1. hongcyu Edge 18.18362 Windows 10 中国 福建 福州
      @周星星

      B站默认视频质量是最低的，可以通过在src链接后面添加&high_quality=1来设置
      Reply
    2. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @周星星

      OωO 这个还真没注意过
      Reply
  30. cnfox Google Chrome 74.0.3724.8 Windows 10 中国 山东 泰安

    用上了~配置好之后 整站刷新下就能用了~ ヾ(≧∇≦*)ゝ
    Reply
    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @cnfox

      恩呐
      Reply
  31. 森七 Google Chrome 72.0.3626.121 Android 9 中国 四川 南充

    来看看寒光兄，顺便这个可以用来水

    滴！访客卡！请上车的乘客系好安全带，现在是：Tue Sep 03 2019 14:13:34 GMT+0800 (中国标准时间)
    Reply
    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @森七

      哈哈
      Reply
  32. 九日 Google Chrome 76.0.3809.100 Windows 7 中国 广东

    终于出教程啦！！好几天没来看果然有好东西，嘿嘿，用到了，很棒 。另外可以转载吗，会带上本文链接的。（其实我就是想水一波）不我不是，我是为了方便自己方便他人！
    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @九日

      恩呐搬走啦~
      Reply
  33. clatterrr Google Chrome 61.0.3163.100 Windows 10 中国 湖南

    OωO我在wordpress上用iframe放了几个，但是不知为何microsoft Edge就是无限加载中，但其它浏览器甚至wordpress可视化编辑器页面都能看....
    Reply
    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 青海 黄南藏族自治州
      @clatterrr

      链接给我看看
      Reply
  34. 偏锋博客 Firefox 68.0 Windows 10 中国 云南 大理白族自治州

    好的，感谢博主分享，学到了
    Reply