如何在博客园中插入视频、音频、网页

相信很多人都有这样的经历，当我们想在博客中插入视频、音频或者其他网页时，往往效果并不是我们想要的，因此分享一个小技巧：

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;  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;  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视频