因为家人身体不适,因此只能在家宅着折腾下代码。

在从良未遂博文《实用代码》中提到:

插入自适应媒体已经是刚需了,之前也介绍过一种姿势,貌似这个更简单一些。当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的,而且你在用手机浏览的时候视频播放器还变形了,以下代码自动让播放器按 16:9 的比例显示并自适应各个设备。另外:还可以插入腾讯自适应视频。

CSS 代码:

HTML 代码:

感谢从良未遂,解决了一直以来困扰本博的视频插入不能自适应手机界面的难题。不过按照上面的代码更改以前插入的一些 video 时发现,例如土豆网的代码是:

或者

embed 代码在苹果 iOS 上无法正常显示,只能采用 iframe。而采用以上 CSS 代码后,在电脑上就被直接拉伸为 100% 了;另外如果两段 video 代码连续放置,会首尾连接在一起。解决方案是更改 width 为 max-width,以及增加 margin-bottom。如下:

示范:

在苹果手机上可以看见已经自适应了。