响应式网站视频制作

发布日期:2015-08-09 21:33:57

以上我们可以看出,支持老版本浏览器会一如既往地导致代码变得臃肿。标签从刚开始的一两行变成到最后的十多行(增加了一个 Flash 文件) ,仅仅是为了让老版本浏览器舒坦工作!对我而言,我更乐意忘掉 Flash备用方案以追求更精简的代码,不过每种用法都各有优劣。现在,我们可爱的 HTML5视频的唯一问题是它不是响应式的。没错,我们辛辛苦苦搞的

响应式网页却不怎么响应。看看下面的截图,你最好忍着不要飙泪:

幸运的是,对于 HTML5式嵌入视频,修正方法很简单。只需删除视频标签中的 height和 width 属性(如删除 width="640" height="480" ) ,然后在 CSS中追加如下代码:
video { max-width: 100%; height: auto; }这种方法对本页面中的视频文件很有用,但它不能解决使用 iframe 嵌入的视频的响应问题 (拜YouTube、 Vimeo等等视频网站所赐) 。 下面的代码可以在网页中插入来自YouTube的电影《午夜狂奔》
① 的预告片:
暂且不管之前的 CSS规则,现在的效果如下:

我敢肯定德尼罗
② 对这个效果很不爽!很有多方法可以解决这个问题,但截至目前我见过的最简单的办法是使用一个名为 FitVids的 jQuery小插件。 我们来看看将这个插件应用到
北京网站建设...网站中到底有多简单。首先引入 jQuery 库文件。在页面的元素中加载该文件。此处我使用来自 Google的内容分发网络(CDN)的文件。

其次,从网站 上下载 FitVids 插件将 FitVids文件存入一个合理的文件夹(假设文件夹名为“js” ) ,然后在中引入该文件:

最后,只需使用 jQuery指定包含 YouTube视频的特定元素。本例中我将《午夜狂奔》视频放入了 id为 #content 的 div 中:

只需这三步。多亏有了 FitVid 插件,现在我们有了一个完全可响应的 YouTube视频。 (注意:小子,不要向视频中的德尼罗学习,吸烟有害健康! )

哈哈,全部搞定。这下我就又可以收到鲍比的圣诞贺卡了!


  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计