針對老版本瀏覽器的備用方案 響應式視頻：對於 HTML5式嵌入視頻，修正方法很簡單。只需刪除視頻標簽中的 height和 width 屬性（如刪除 width="" height="" ），然後在 CSS中追加如下代碼： video { max-width: 100%; height: auto; ... ...
最初的 HTML5規範呼籲所有瀏覽器內置支持使用 Ogg格式① 直接播放視頻或音頻（無需插件）。但是由於 HTML5工作組的內部爭議，曾經作為基線標準的支持 Ogg（包括 Theoravideo 和 Vorbis audio）的主張在最近更新的 HTML5規範中被放棄。因此目前的情況是，一些瀏覽器支持某一套視頻和音頻文件格式，而另一些瀏覽器則支持其他格式。例如Safari只允許在 <video> 和 <audio> 元素中使用 MP4/H.264/AAC媒體文件，而 Firefox 和Opera則只支持 Ogg和 WebM。謝天謝地，有一種方法能在一個標簽內支持多種媒體格式。但是這種方法並不能免除我們為一個媒體文件創建多種版本。我們都期望這個問題在將來某個適當的時刻會自行解決，此時我們手握多種格式的媒體文件，則可以這樣編寫視頻標簽：
<video width="640" height="480" controls autoplay preload="auto" loopposter="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>
如果瀏覽器支持 Ogg格式，則使用第一個文件；否則它會繼續往下解析下一個 <source>標簽。
針對老版本瀏覽器的備用方案：
照這種方式使用 <source> 標簽，我們就能根據需要提供一系列備用方案。例如在提供了MP4 和 Ogg 格式之後，如果我們還想給 IE8 及更低版本提供一個優雅的備用方案，則可以追加一個 Flash。更進一步，如果用戶的瀏覽器沒有任何合適的媒體播放技術，我們還可以為其提供媒體文件的下載鏈接：
<video width="640" height="480" controls autoplay preload="auto" loop poster=
"myVideoPoster.jpg">
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.ogv" type="video/ogg">
<object width="640" height="480" type="application/x-shockwave-flash"data="myFlashVideo.SWF">
<param name="movie" value="myFlashVideo.swf" />
<param name="flashvars" value="controlbar=over&image=myVideoPoster.jpg& file=video/myVideo.mp4" />
<img src="myVideoPoster.jpg" width="640" height="480" alt="__TITLE__"title="No video playback capabilities, please download the video below" />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href="myVideo.mp4">"MP4"</a>
Ogg Format: <a href="myVideo.ogv">"Ogg"</a>
</p>
</video>
響應式視頻：
對於 HTML5式嵌入視頻，修正方法很簡單。只需刪除視頻標簽中的 height和 width 屬性（如刪除 width="" height="" ），然後在 CSS中追加如下代碼：
video { max-width: 100%; height: auto; }
這種方法對本頁面中的視頻文件很有用，但它不能解決使用 iframe 嵌入的視頻的響應問題，有很多方法可以解決這個問題，但截至目前我見過的最簡單的辦法是使用一個名為 FitVids的 jQuery小插件。
首先引入 jQuery 庫文件。在頁面的 <head> 元素中載入該文件。其次，從網站 http://fitvidsjs.com/上下載 FitVids 插件（有關該插件的更多信息請見http://daverupert.com/2011/09/responsive-video-embeds-with-fitvids/）。將 FitVids文件存入一個合理的文件夾（假設文件夾名為“js”），然後在 <head> 中引入該文件：
<script src="js/fitvids.js"></script>
最後，只需使用 jQuery指定包含 YouTube視頻的特定元素。將視頻放入 設有id為 #content 的 div 中：
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#content").fitVids();
});
</script>
只需這三步。多虧有了 FitVid 插件，現在我們有了一個完全可響應的 YouTube視頻。
