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

相信很多人都有這樣的經歷，當我們想在博客中插入視頻、音頻或者其他網頁時，往往效果並不是我們想要的，因此分享一個小技巧：

1. iframe

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

2. 使用方法

2.1 設置預設編輯器

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

2.2 插入iframe

1. 新建一篇隨筆
2. 
3. 點擊上圖紅框中的圖標
4. 
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視頻