中午收到Google Search Console的一封邮件，提醒我网站存在移动端的错误。仔细检查后发现是一篇插入了B站视频的文章，在手机端浏览时会出现视频超出页面范围的问题。
对于网页中插入视频，通常视频网站提供的都是指定宽高度的iframe链接，由于本站采用了响应式布局，固定的视频尺寸就会和网页整体布局产生冲突。（Youtube链接虽然提供了固定的宽高，但仍会自动匹配页面布局）
使用**max-width=100%**的方法虽然可以解决手机等移动端超出页面的问题，但对于一些分辨率较低的视频，在PC端又会显得太小，与页面不协调。
因此最佳的方案就是通过修改CSS的方法使插入的视频也具备响应式的功能。

方法和步骤

修改CSS

首先在 ~\themes\next\source\css\main.styl 中插入下面一行代码以导入自定义CSS

@import "_custom/iframe";

然后在~\themes\next\source\css\_custom新建文件iframe.styl，输入以下内容：

/*响应式iframe*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

插入视频

将视频的嵌入代码插入网页的适当位置,去掉其中关于宽度高度的信息 (width, height)，
然后在 iframe 标签后加上 class="iframe_video"，例如：

<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=74352571&cid=127185886&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

示例

本段是不同网站及清晰度下响应式视频插入的示例，为了篇幅简洁隐藏了一下。
可以自行寻找需要的例子，通过手机及PC端浏览效果感受其差异

B站 (1080P)

点击查看详细内容

代码：

<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=74352571&cid=127185886&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

结果：

Youtube (1080P)

点击查看详细内容

代码：

<iframe class="iframe_video" src="https://www.youtube.com/embed/G0W8ilpnsaU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

结果：

优酷 (360P)

点击查看详细内容

代码：

<iframe class="iframe_video" src='//player.youku.com/embed/XNzUwOTk5MzE2' frameborder=0 allowfullscreen></iframe>

已经9102年了优酷居然还不支持HTTPS嵌入，为了网站的小绿锁在这就不放结果了。

以上代码在Chrome中要手动选择加载未知脚本，Edge下可以自动运行。

niconico (1080P)

点击查看详细内容

代码：

<iframe class="iframe_video" src='https://embed.nicovideo.jp/watch/1559276347/' frameborder="0" allowfullscreen></iframe>

结果：

Meadow主题下的视频响应式

由于Meadow主题基于MDUI框架而开发，因此直接使用MDUI的媒体响应式布局会更加便捷。

嵌入式视频

在嵌入式视频的父元素上添加类 .mdui-video-container 使视频自适应父元素的宽度。

<div class="mdui-video-container">
  <iframe src="SRC_URL" frameborder=0 allowfullscreen></iframe>
</div>

HTML5视频

在video标签上添加类.mdui-video-fluid使视频自适应父元素的宽度。

<video class="mdui-video-fluid" controls>
  <source src="video.mp4" type="video/mp4">
</video>