4.9 响应式视频
以上我们可以看出，支持老版本浏览器会一如既往地导致代码变得臃肿。<video>标签从刚开始的一两行变成到最后的十多行（增加了一个Flash文件），仅仅是为了让老版本浏览器舒坦工作！对我而言，我更乐意忘掉Flash备用方案以追求更精简的代码，不过每种用法都各有优劣。
现在，我们可爱的HTML5视频的唯一问题是它不是响应式的。没错，我们辛辛苦苦搞的响应式网页却不怎么响应。看看下面的截图，你最好忍着不要飙泪：
幸运的是，对于HTML5式嵌入视频，修正方法很简单。只需删除视频标签中的height和width属性（如删除width＝"640" height＝"480"），然后在CSS中追加如下代码：
这种方法对本页面中的视频文件很有用，但它不能解决使用iframe嵌入的视频的响应问题（拜YouTube、Vimeo等等视频网站所赐）。下面的代码可以在网页中插入来自YouTube的电影《午夜狂奔》(2)的预告片：
暂且不管之前的CSS规则，现在的效果如下：
我敢肯定德尼罗(3)对这个效果很不爽！很有多方法可以解决这个问题，但截至目前我见过的最简单的办法是使用一个名为FitVids的jQuery小插件。我们来看看将这个插件应用到And the winner isn’t...网站中到底有多简单。
首先引入jQuery库文件。在页面的<head>元素中加载该文件。此处我使用来自Google的内容分发网络（CDN）的文件。
其次，从网站http://fitvidsjs.com/上下载FitVids插件（有关该插件的更多信息请见http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/）。
将FitVids文件存入一个合理的文件夹（假设文件夹名为“js”），然后在<head>中引入该文件：
最后，只需使用jQuery指定包含YouTube视频的特定元素。本例中我将《午夜狂奔》视频放入了id为#content的div中：
只需这三步。多亏有了FitVid插件，现在我们有了一个完全可响应的YouTube视频。（注意：小子，不要向视频中的德尼罗学习，吸烟有害健康！）
哈哈，全部搞定。这下我就又可以收到鲍比的圣诞贺卡了！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论