寒光博客

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

/*视频挂载*/

.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:August 20th, 2019 at 11:43 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

9 comments

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

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

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

      OωO 这个还真没注意过

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

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

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

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

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

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

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

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

      恩呐搬走啦~

  5. 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

      链接给我看看

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

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