WPCOM主题关于文章视频移动端显示适配的优化

在文章里面插入视频是很多网站都会有的需求,不过视频不会和图片一样可以等比例自动适配移动端的尺寸:即使控制了视频的最大宽度为100%,但是高度还是PC端的高度,这就会导致视频尺寸异常的情况,严重影响用户浏览体验。不过不用担心,在我们WPCOM开发的WordPress主题中此问题已经得到完美解决,下面来简单介绍下使用我们的主题如何完美适配移动端显示。

WPCOM主题关于文章视频移动端适配的优化

视频添加到网站文章里面一般分为两种方式:

  1. MP4格式的视频文件或者链接;
  2. 外部视频网站通用分享代码

针对这两种方式,目前都有对应的解决方案,我们分别来介绍。

温馨提示:以下操作均基于新版区块编辑器,习惯旧版经典编辑器的用户建议在需要插入视频的时候考虑切换区块编辑器操作。

MP4格式视频的适配

如果插入的是视频是MP4格式,那就简单了,可以直接添加视频区块,如果是本地视频文件,可以直接上传后插入,如果是外链的mp4视频地址资源,则可从URL插入,如图: 插入视频

通过此方法添加的视频主题会自动调用内置的plyr播放器,此播放器主题已经配置了默认的视频比例:16:9,也就是说不管PC端还是移动端访问,播放器都会自动对视频尺寸进行调整,无需其他额外操作。

通用分享代码的自动适配

通过外部视频网站获取的通用分享代码一般都是通过iframe的方式来引入视频,不过iframe是无法自动识别里面内容的具体尺寸,所以这种分享代码一般会在代码里面就预先配置好了尺寸,但是问题是预先配置的尺寸是固定的尺寸,不管在哪里显示都是按这个尺寸,这会导致不仅在移动端显示异常,就连PC端可能都无法达到预期效果。

针对此问题我们早期开发了一个视频代码的区块,可以对尺寸重新定义,来优化显示,并在移动端宽高进行了优化。不过移动端的效果依然不是很理想,所以就在近期我们特意对此区块进行了优化更新,更新优化后的区块我们将原先的宽度和高度计算成固定比例,例如高度设置的是600,宽度设置的是400,那么我们会自动按宽高比3:2来自动适配,这样不管PC端还是移动端,都能保持一样比例来显示视频,达到自适应的效果。 通用分享代码的自动适配

推荐主题

上一篇:WPCOM主题页脚小工具添加导航菜单教程

下一篇:JustNews主题自定义表情包教程

猜你喜欢

在线咨询
QQ咨询
微信咨询

添加专属客服

一对一为您答疑解惑 添加客服企业微信 立即扫码添加我吧
扫码关注

扫码关注微信

关注我们获取最新资讯 关注微信公众号 立即扫码关注我们