最近在博客中插入了一个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端：
感觉还行，但是到了移动端就不一样了：
哈哈，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>效果如下
即解决了问题，视频和文字对齐，看起来也美观了很多。
解释一下这个代码：
-
<div> 元素设置了一个相对位置和一个 16:9 的宽高比（56.25% = 9/16），从而使其内容自适应。
-
<iframe> 元素则使用绝对定位，并将宽度和高度设置为 100%，从而填满 <div> 的空间。
这种方式可以确保视频在不同大小的屏幕上都能自适应显示。
这个模板其他平台也是有效的，如bilibili：
我随便找了个视频，大家看一下，只是把src改成了b站嵌入代码中的src，如下：
希望能对你有所帮助。
See you！