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

2019/04/10 10:10
阅读数 47

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

1. iframe

<iframe>是HTML语言的一个标签,<iframe>标签定义了一个内联框架,这个内联框架被用来在当前HTML文档中嵌入另一个文档(PS: 另一个文档可以是一个视频链接、音频链接或者一个网页等)。

2. 使用方法

2.1 设置默认编辑器
  1. 首先打开https://i-beta.cnblogs.com/
  2. 点击选项,在默认编辑器中选择TinyMCE
  3. 点击确定
2.2 插入iframe
  1. 新建一篇随笔
  2. 编译HTML图标
  3. 点击上图红框中的图标
  4. HTML编辑器
  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视频

原文出处:https://www.cnblogs.com/wengle520/p/12411812.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部