Skip to content

如何在Astro Markdown博客中插入视频,让其自适应页面大小

Published: at 02:36

最近在博客中插入了一个youtube视频,pc端看起来似乎很正常,只是页面不是很居中,想想也不是大事情,就无所谓了,直到我前两天用手机打开博客,发现这个视频把我整个页面给撑起来了。根本无法看,所以简单研究了一下,自适应视频的宽度,达到页面的美观(非前端出身,大佬求放过)

一开始我直接在Markdown中插入了youtube给的代码

如下:

<iframe width="560" height="315" src="https://www.youtube.com/embed/t4vSzN2QDrE?si=Gx4nHrPwVaqasoud" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

在我现在的astropaper这个模板中的效果是这样的

pc端:

20240717024350

感觉还行,但是到了移动端就不一样了:

20240717024443

哈哈,youtube给的代码中,把iframe 的size写死了,所以导致了当页面宽度不够的时候,出现这个问题。

我研究一下后,给出了一个我比较满意的解决方案

解决方案

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/[这里替换成视频的id,在视频的URL中可以找到]" frameborder="0" allowfullscreen></iframe>
</div>

效果如下

即解决了问题,视频和文字对齐,看起来也美观了很多。

解释一下这个代码:

这种方式可以确保视频在不同大小的屏幕上都能自适应显示。

这个模板其他平台也是有效的,如bilibili:

我随便找了个视频,大家看一下,只是把src改成了b站嵌入代码中的src,如下:

希望能对你有所帮助。

See you!