响应式网页设计中的视频处理技巧
毫无疑问，对于网站而言视频是极其重要的营销工具。因此，对于富有弹性的响应式视频的需求越来越多。
就像图片一样，让图片灵活地适配网页也是个头疼的事情。这并不关乎视频播放器的尺寸，但即使是播放按钮这样的的基础网页元素，也都需要针对千奇百怪的设备来适配和优化。以下提供几个解决方案：
为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的过程并不简单，此外，这项技术对于多视频的网站可行性并不高。不过如果你的网站已经设计成响应式的页面，那么这项技术将会在你的网站上完美运行。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
