3.【typecho】在个人博客中插入视频播放器、音乐播放器演示
今天和大家分享的是在typecho中加入视频和音乐。
我们先看效果。
插入的b站视频，在博客网页里只能看360p，选择其它分辨率会跳转到b站网页。
1.插入音乐
在音乐客户端那里点击“分享”，复制链接，在网页端打开
在打开的网页里选择“生成外链播放器”
默认的就是这种样子。
播放器的样式有三种可以选，同时可以选择是否自动播放。
直接复制代码，然后在typecho里撰写文章，复制粘贴就可以看到效果。
搞定
2.插入视频
视频会略微麻烦一点，也是可以这样直接复制代码粘贴过来就行，但是那样会比较难看，是一个小窗口，我想弄漂亮一点，所以需要设置一下CSS。
而我用的免费主题pinghsu是没有这个功能的（handsome主题是有的，某些主题也会有），所以需要用到一个插件CustomCssAndJs
这个插件下载之后发放到typecho根目录usr-plugins下面
CustomCssAndJs下载链接 https://wwi.lanzous.com/idiEtk58qcb
接着在控制台-插件管理中启用。
进入这个插件的设置里，在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"
以上就是本文的全部内容。
如果本文对您有参考价值，可以关注、点赞、收藏、打赏、评论来支持作者，十分感谢！
