如何在博客園中插入視頻、音頻、網頁

相信不少人都有這樣的經歷，當咱們想在博客中插入視頻、音頻或者其餘網頁時，每每效果並非咱們想要的，所以分享一個小技巧：

1. iframe

<iframe>是HTML語言的一個標籤，<iframe>標籤訂義了一個內聯框架，這個內聯框架被用來在當前HTML文檔中嵌入另外一個文檔（PS: 另外一個文檔能夠是一個視頻連接、音頻連接或者一個網頁等）。

2. 使用方法

2.1 設置默認編輯器

1. 首先打開https://i-beta.cnblogs.com/
2. 點擊選項，在默認編輯器中選擇TinyMCE
3. 點擊肯定

2.2 插入iframe

1. 新建一篇隨筆
3. 點擊上圖紅框中的圖標
5. 插入以上代碼，點擊更新，保存隨筆，查看效果

2.3 效果展現

1. 博客園中插入視頻
2. 博客園中插入網頁

2.4 通用代碼

示例裏面是插入了一個視頻，咱們也能夠插入一個網頁。下面給出了插入視頻和網頁的樣例，若是須要插入其餘的媒體，只須要修改iframe標籤中的src屬性。(PS: 下面的代碼一樣適配移動端)

1.插入一個視頻
<div style="position: relative; padding: 30% 45%;">
    <iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>

2.插入一個網頁
<div style="position: relative; padding: 30% 45%;">
    <iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" frameborder="no" scrolling="no"></iframe>
</div>

3. 參考資料

1. HTML <iframe> 標籤
2. 關於博客園內嵌入bilibili視頻