Typecho文章内挂载B站视频

陈阿叔 2021-02-23 AM 75℃ 0条

1.先给主题添加自定义样式

将下方代码添加到主题的自定义CSS里

主题支持自定义css可这样操作,在控制台→外观→设置外观→找到自定义样式,代码复制到框中即可

主题不支持自定义样式,可以找到\\usr\\themes\\你的主题\\css,style.css复制进去就可以。

class="">


2.样式代码

    
        /*B站视频挂载*/ .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 }
    



3.复制视频源代码

打开B站视频网页,如图找到
“嵌入代码”
,点击复制

style="max-width:100%;">

4.修改代码

复制嵌入代码到文章需要放置的位置。

然后给 iframe 这个标签添加 class="iframe_video" 位置如下: 

    
        原始代码:<iframe src="//player.bilibili.com/player.html?aid=412935552&bvid=BV1FV411d7u7&cid=186803402&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
        </iframe> 修改代码:<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=412935552&bvid=BV1FV411d7u7&cid=186803402&page=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
        </iframe>
    

大功告成!

下面是两个代码演示效果



原文来源于:
Kali''s Blog

首图来源于:
BilibiliWorld 2019 官网

标签: Typecho

非特殊说明,本博所有文章均为陈阿叔原创。

评论啦~