寒光博客

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

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

效果

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://dxoca.cn/front/257.html       百度已收录
版权说明:若无注明,本文皆为“Dxoca's blog (寒光博客)”原创,转载请保留文章出处。
Last modification:June 10th, 2020 at 11:22 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

25 comments

  1. 秋枫 Edge 18.18363 Windows 10 中国 贵州

    博主你好 请问一下 我按照教程发布了文章 那个视频怎么是小的啊 怎么改成你这种大的

    1. 秋枫 Edge 18.18363 Windows 10 中国 贵州
      1. Dxoca Google Chrome 81.0.4044.138 Windows 10 中国 青海 西宁
        @秋枫

        你好 我刚进去你网站看了一下,我看到是你没有挂载css 或者css没有挂载成功 你检查一下css的挂载 弄好就好了~~|´・ω・)ノ

        1. 秋枫 QQ 8.3.5.4555 Android 9 中国 浙江
          @Dxoca

          好的,谢谢,我一会看看

  2. DylanLi Google Chrome 81.0.4044.122 Windows 10 中国 中国

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

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

      文章地址:https://cloudguest.cn/archives/258/
      ( ๑´•ω•) "(ㆆᴗㆆ)

  3. 丨浅笑安然丨 Edge 81.0.416.68 Windows 10 中国 江苏 泰州

    手机怎么改清晰度

  4. michael Google Chrome 80.0.3987.122 Windows 7 中国 山东 聊城

    请问最后这个CSS ,需要怎么修改??小白,请大佬指点

    1. dxoca QQ 8.3.0.4480 Android 9 中国 青海
      @michael

      写到页面挂载的css里或者 内嵌式和代码放一起呗

  5. 一只小物块 Edge 79.0.309.71 Windows 10 中国 山东 青岛

    用上,理论上来说不仅仅是这个,都可以吧

    1. dxoca QQ 8.3.0.4480 Android 9 中国 青海
  6. Naiel Google Chrome 78.0.3904.108 Android 9 中国 广东 深圳

    你这转载把自己名字都写上去了啊。

    1. dxoca QQ 8.3.0.4480 Android 9 中国 青海
      @Naiel

      我不是原创吗?? 怎么成转载了...OωO

  7. 周星星 Firefox 68.0 Windows 10 中国 河南 焦作

    博主,我想问一下:怎么设置才能使引用过来的视频的清晰度 默认画质最优的?

    1. hongcyu Edge 18.18362 Windows 10 中国 福建 福州
      @周星星

      B站默认视频质量是最低的,可以通过在src链接后面添加&high_quality=1来设置

    2. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @周星星

      OωO 这个还真没注意过

  8. cnfox Google Chrome 74.0.3724.8 Windows 10 中国 山东 泰安

    用上了~配置好之后 整站刷新下就能用了~ ヾ(≧∇≦*)ゝ

    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @cnfox

      恩呐

  9. 森七 Google Chrome 72.0.3626.121 Android 9 中国 四川 南充

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

    滴!访客卡!请上车的乘客系好安全带,现在是:Tue Sep 03 2019 14:13:34 GMT+0800 (中国标准时间)

    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @森七

      哈哈

  10. 九日 Google Chrome 76.0.3809.100 Windows 7 中国 广东

    终于出教程啦!!好几天没来看果然有好东西,嘿嘿,用到了,很棒 。另外可以转载吗,会带上本文链接的。(其实我就是想水一波)不我不是,我是为了方便自己方便他人!

    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @九日

      恩呐搬走啦~

  11. clatterrr Google Chrome 61.0.3163.100 Windows 10 中国 湖南

    OωO我在wordpress上用iframe放了几个,但是不知为何microsoft Edge就是无限加载中,但其它浏览器甚至wordpress可视化编辑器页面都能看....

    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 青海 黄南藏族自治州
      @clatterrr

      链接给我看看

  12. 偏锋博客 Firefox 68.0 Windows 10 中国 云南 大理白族自治州

    好的,感谢博主分享,学到了