寒光博客

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

/*视频挂载 https://dxoca.cn/front/257.html */

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

大功告成!

本文作者:Author:     文章标题:typecho文章挂载Bilibili视频响应式代码
本文地址:https://dxoca.cn/front/257.html       百度已收录
版权说明:若无注明,本文皆为“Dxoca's blog (寒光博客)”原创,转载请保留文章出处。
Last modification:November 5th, 2019 at 11:36 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

11 comments

  1. 周星星

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

    1. Dxoca
      @周星星

      OωO 这个还真没注意过

  2. cnfox

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

    1. 寒光博客
      @cnfox

      恩呐

  3. 森七

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

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

    1. 寒光博客
      @森七

      哈哈

  4. 九日

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

    1. Dxoca
      @九日

      恩呐搬走啦~

  5. clatterrr

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

    1. 寒光博客
      @clatterrr

      链接给我看看

  6. 偏锋博客

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