最近在博客中插入了一个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!