Hexo下插入视频的响应式布局

简介

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

方法和步骤

修改CSS

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

1
@import "_custom/iframe";

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*响应式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",例如:

1
<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)

点击查看详细内容

代码:

1
<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)

点击查看详细内容

代码:

1
<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)

点击查看详细内容

代码:

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

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

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

niconico (1080P)

点击查看详细内容

代码:

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

结果:

--- 本文结束 The End ---