3.【typecho】在個人博客中插入視頻播放器、音樂播放器演示
今天和大家分享的是在typecho中加入視頻和音樂。
我們先看效果。
插入的b站視頻，在博客網(wǎng)頁里只能看360p，選擇其它分辨率會跳轉(zhuǎn)到b站網(wǎng)頁。
1.插入音樂
在音樂客戶端那里點擊“分享”，復制鏈接，在網(wǎng)頁端打開
在打開的網(wǎng)頁里選擇“生成外鏈播放器”
默認的就是這種樣子。
播放器的樣式有三種可以選，同時可以選擇是否自動播放。
直接復制代碼，然后在typecho里撰寫文章，復制粘貼就可以看到效果。
搞定
2.插入視頻
視頻會略微麻煩一點，也是可以這樣直接復制代碼粘貼過來就行，但是那樣會比較難看，是一個小窗口，我想弄漂亮一點，所以需要設(shè)置一下CSS。
而我用的免費主題pinghsu是沒有這個功能的（handsome主題是有的，某些主題也會有），所以需要用到一個插件CustomCssAndJs
這個插件下載之后發(fā)放到typecho根目錄usr-plugins下面
CustomCssAndJs下載鏈接 https://wwi.lanzous.com/idiEtk58qcb
接著在控制臺-插件管理中啟用。
進入這個插件的設(shè)置里，在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"
以上就是本文的全部內(nèi)容。
如果本文對您有參考價值，可以關(guān)注、點贊、收藏、打賞、評論來支持作者，十分感謝！
