Embedding videos from Youtube and Bilibili into your blog
Embedding videos from YouTube and Bilibili into your blog is a great way to keep readers engaged. Both platforms provide native <iframe> HTML codes that you can copy and paste directly into your blog’s editor.
Here is exactly how to get the codes and how to use them.
1. How to Embed a YouTube Video
YouTube makes embedding very straightforward, and the player is highly responsive.
Step-by-Step:
- Go to the YouTube video you want to embed.
- Click the Share button below the video.
- Click the Embed icon (
<>). - (Optional) Adjust the settings on the right, such as choosing a specific start time or toggling player controls.
- Click Copy in the bottom right corner of the popup.
The Code Template:
It will look something like this:
1 | <iframe |
2. How to Embed a Bilibili Video
Bilibili is a bit trickier because its default embed code can sometimes look too small or restricted on Western blog platforms, but it is still fully supported.
Step-by-Step:
- Go to the Bilibili video on your desktop browser.
- Hover over the Share (分享) icon below the video player.
- Click on Embed Code (嵌入代码) to copy it automatically to your clipboard.
The Code Template:
Bilibili will give you a code that looks like this:
1 | <iframe src="//player.bilibili.com/player.html?bvid=YOUR_BVID&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe> |
⚠️ Crucial Bilibili Tweaks:
The default Bilibili code usually loads as a tiny, squished box. To make it look professional on your blog, you must manually add width, height, and high-quality parameters to the code.
Modify your Bilibili snippet to look like this:
1 | <iframe |
&high_quality=1: Forces the player to load the highest available resolution.width="100%"andheight="500px": Ensures the player stretches beautifully across your blog post.
3. How to Paste It into Your Blog
How you apply this depends on what blogging platform you are using:
- WordPress (Gutenberg): Click the
+icon to add a new block, search for Custom HTML, and paste your code there. (Do not use the standard text block). - Markdown (Hexo, Jekyll, Hugo): You can paste the
<iframe>code directly into your Markdown files naked. It renders raw HTML perfectly. - Notion: Type
/embed, press Enter, paste the standard video URL (not the iframe code), and Notion will generate the block for you.
关于YouTube使用embed语法会报错153
Typora 本地内核（基于本地文件协议）被彻底锁死了传参。目前 YouTube 的安全风控非常严格，一旦它在请求头里检测不到一个正常的 https:// 线上网址来源，或者检测到请求来自类似本地离线环境（如 file://），无论代码怎么改，播放器都会直接拒绝服务。
既然在 Typora 软件里“硬啃” HTML 嵌入不给放行，我们有两个非常聪明的曲线救国方案，既不耽误你写博客，也能解决本地预览的问题：
方案一：使用 Markdown 标准视频语法（最推荐）
如果你只是要在 Typora 里能够顺畅地看视频、且不让一坨复杂的 HTML 代码弄乱你的文档，可以直接使用更现代的 Markdown 原生组件：
Markdown
1 |  |
💡 为什么这个管用？ 当你在 Typora 中直接像插入图片一样插入 YouTube 的普通观看链接（注意：不是 embed 链接）时，Typora 的内部高版本内核会接管这个链接，使用它自己的独立多媒体沙盒去加载它。由于加载的是主站播放器，它不需要校验第三方的 Referer，因此能够完美避开 153 报错，正常显示画面。
方案二：使用标准“封面图跳链”（写博客的通用工业标准）
在实际的独立博客（如 Hexo, Hugo, GitHub Pages）或者 Markdown 写作圈子里，通常不建议在文章中直接塞入大段的 <iframe> 视频，因为这会严重拖慢你博客的加载速度（读者一进你的网页，浏览器就要同时去后台加载 YouTube 的一堆脚本）。
最标准、也最漂亮的写法是放一张带播放按钮的视频封面，点击后直接跳转到 YouTube 新标签页播放：
Markdown
1 | [](https://www.youtube.com/watch?v=你的视频ID) |
这个写法的巨大优势：
- 自动获取高清封面：
img.youtube.com/vi/...这个链接是 YouTube 官方的封面 API，它会自动抓取该视频的最高清缩略图，在 Typora 里会直接显示成一张漂亮的静态封面。 - 0延迟、100%不报错： 在 Typora 里它只是一张图，绝对不会弹任何“153 错误”或自动播放声音。
- 体验顺畅： 无论是在 Typora 预览还是发布到个人博客上，读者点击这张封面，就会优雅地弹出一个新网页直接观看视频。
总结建议
如果你希望在 Typora 里直接点开就能播，直接用 [方案一]；如果你考虑未来博客的页面加载速度和跨平台兼容性，强推 [方案二]！
Wechat- Alipay
- Paypal
