投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

WordPress利用FitVids让视频完美适配电脑与手机

PHP 崔庆才 5206浏览 7评论

视频大小适配是个头疼的问题。之前利用了Advanced Responsive Video Embedder 这个插件结果发现还是手机端显示有些问题,不能正常播放,这下我们利用FitVids来做到电脑和手机适配。已经完美解决

这次我们不用加任何插件,完全可以用JS代码来实现。首先,我们需要在主题的js目录下创建一个js文件,名字叫做 jquery.fitvids.js

加入如下代码,然后保存。

接下来我们要修改functions.php文件咯

加入如下代码

这段代码就是引入了上面我们放入的js文件,并在WordPress模板加载的时候进行初始化设置。

然后我们加入一段代码对某些模仿器进行适配。

针对YouTube或Vimeo等支持oembed的视频源,我们再在functions.php加入如下代码来进行控制

对于国内的一些视频网站,视频源为embed,我们再在functions.php加入如下代码来控制

我们在发布视频时只需要在外面套2行代码就行啦。

比如我的一个视频是从土豆获取来的HTML代码,源代码为

那么我们在发布时只需要在外面套一层div就OK了

最后的代码如下

在文章中的HTML代码编辑器中插入如上代码即可实现手机端和电脑端的视频完美适配。

以上就是利用Fitvids来对视频进行适配操作的全部过程。

 

转载请注明:静觅 » WordPress利用FitVids让视频完美适配电脑与手机

喜欢 (4)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 99350970 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 627725766 立即加入

想找人聊天解闷?想要学习干货?

微信公众号进击的Coder为你打造

进击的Coder

微信公众号 扫一扫关注