其实只是博客中想嵌入16：9的youtube视频，但youtube官方的嵌入代码是固定宽度1280，高度720，在手机上表现十分不好。因此有了这个偏前端的主题。
先上效果
随意放大，缩小网页，下面的iframe都会保持100%宽度，高度保持9/16*宽度。
要翻墙才能看到下面的视频哦。是一个物理学家弹吉他吟唱《将进酒》,超级得劲 :）
插入的html如下
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/DBC5x8Mv5OE?list=PLoZEEVUrMkMSIkfSbEXNQFubB4yOjMz2a" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
实现原理
放上原博客。
这个博客说到，使用js来实现响应式iframe是不对的，应该使用css。
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
width: 100%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.iframe-container 的 padding-top: 56.25%属性，就决定着 高度是宽度的9/16。
那么hugo怎么使用这个css？
我在主题下的scss文件夹中的_base.scss中加入了上面的css，发现就能生效，还是较为简单方便的。
至于另一种html5的vedio标签，只需要宽度和高度都设为100%即可实现响应式，如下：
<video controls="" width="100%" height="100%"><source src="http://cdn.moontell.cn/robot.mp4" type="video/mp4"></video>
番外：其他本博客使用的前端小技巧
这是一个偏前端的博客，估计很久不会有其他前端文章，所以把这个小东西也放在这。
对博客中出现的图片宽度进行定制
一般我们在markdown中插入图片就是：
这个在大多数情况表现良好，图片宽度会取min(100%父容器宽度, 图片像素px)。但是有一种情况让人很头疼：手机截图。现在手机的像素都很高，{图片像素px}至少会是1080，而且屏幕截图很长。上面的这个图片不长，想象一下一个好几屏的长截图🤢，这种情况下截图占满屏幕，并且需要拉很久，看到就会很难受吧。归根结底，还是因为手机截图的像素宽度太大，导致min(100%父容器宽度, 图片像素px)的值还是很大。
为了避免这个问题。使用下面的方式：
或
这样，图片的宽度，取得就是 min(850px,100%)了。850px这个值可以自行调整，找到在电脑显示器上合适的宽度
有小朋友要问了，能不能直接 img的属性里写 width= “min( 850px, 100%)"。我查了，css3不行，不知道以后css4会不会加进这个min()
具体可以查看 layouts/img.html 指定的hugo shortcode