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

相信不少人都有这样的经历，当咱们想在博客中插入视频、音频或者其余网页时，每每效果并非咱们想要的，所以分享一个小技巧：

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