运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

创作立场声明：分享软件操作过程

今天和大家分享的是在typecho中加入视频和音乐。

我们先看效果。

插入的b站视频，在博客网页里只能看360p，选择其它分辨率会跳转到b站网页。

1.插入音乐

在音乐客户端那里点击“分享”，复制链接，在网页端打开

在打开的网页里选择“生成外链播放器”

默认的就是这种样子。

播放器的样式有三种可以选，同时可以选择是否自动播放。

直接复制代码，然后在typecho里撰写文章，复制粘贴就可以看到效果。

搞定

2.插入视频

视频会略微麻烦一点，也是可以这样直接复制代码粘贴过来就行，但是那样会比较难看，是一个小窗口，我想弄漂亮一点，所以需要设置一下CSS。

而我用的免费主题pinghsu是没有这个功能的（handsome主题是有的，某些主题也会有），所以需要用到一个插件CustomCssAndJs

这个插件下载之后发放到typecho根目录usr-plugins下面

CustomCssAndJs下载链接

接着在控制台-插件管理中启用。

进入这个插件的设置里，在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

}

视频的接入，在b站视频下方的分享那复制代码

再粘贴到文章里，然后在

粘贴的文本里，添加这个代码class="iframe_video"

发布之后就是一个比较漂亮的界面。

如果不设置css，直接粘贴视频的代码，效果是这样的。

以上就是本文的全部内容。

如果本文对您有参考价值，可以关注、点赞、收藏、打赏、评论来支持作者，十分感谢！