毫无疑问,对于网站而言视频是极其重要的营销工具。因此,对于富有弹性的响应式视频的需求越来越多。
就像图片一样,让图片灵活地适配网页也是个头疼的事情。这并不关乎视频播放器的尺寸,但即使是播放按钮这样的的基础网页元素,也都需要针对千奇百怪的设备来适配和优化。以下提供几个解决方案:
为Wordpress中的视频优化
虽然wordpress提供了诸多响应式网站的主题,但是一般情况下,这些内嵌视频并不会根据屏幕尺寸自行适配。这也是为何它们所在的网页可能会出现拉伸,或者不对称的情况。FitVids这一插件完美的解决了这个问题。这是一个jQuery插件,它能让视频针对屏幕尺寸自行适配。激活插件之后,Wordpress会在发布视频内容时,向CSS选择器中自动添加“.post”类。保存修改,你可以尝试在不同尺寸的设备中观察网页的布局,感受视频播放的体验,看看它是怎么工作的。
此外,还有更多可选的Wordpress插件:
-Fluid Video Embeds
-Video Overlayer
-MarcTV Video Embed
-Responsive Video
从其他网站中手动嵌入视频
YouTube以及其他类似的视频托管网站通常以像素为单位固定宽度和高度,并且嵌入到代码中。对于普通网站,这并没有什么不妥,但是对于响应式网页,这样的视频是不合用的。这些使用了内置页框和对象标签的视频网站代码,用HTML5的视频元素来处理是不可能的。简单的说,HTML5的标签搞不定来自Youtube和Vimeo的嵌入视频
这个时候,CSS再次派上了用场。具体来说,即使容器元素按比例缩小,你可又可以保持视频的内在比例。这种技术可以帮助你讲youtube、Vimeo和SlideShare等流媒体网站的视频嵌入到网页中并自然地显示。你所要做的,是使用<div>容器来嵌入代码,并指定子元素的绝对位置,这会使得嵌入的视频根据屏幕宽度自动扩展。
值得注意的是,剥离出视频并且按照尺寸比例封装到Div的过程并不简单,此外,这项技术对于多视频的网站可行性并不高。不过如果你的网站已经设计成响应式的页面,那么这项技术将会在你的网站上完美运行。