投稿    登录
欢迎来访~

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

PHP 崔庆才 9259浏览 52评论

扫码或搜索:进击的Coder

发送

即可立即永久解锁本站全部文章

视频大小适配是个头疼的问题。之前利用了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让视频完美适配电脑与手机

更多文章、联系博主、技术交流、商务合作

扫码或搜索:进击的Coder

进击的Coder

微信公众号 扫一扫关注

喜欢 (8)or分享 (0)

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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址