上集回顧：
昨天講了頁面如何根據不同的設備尺寸做出響應。主要是利用了@media命令以及尺寸百分比化這兩招。
上集補充：
其中，利用以下CSS設置讓圖片或視頻大小不超過設備屏幕的寬度：
復制代碼代碼如下:
img, object{
max-width:100%;
}
這一語句一般加在@media screen and (max-width:481)的判斷內，主要是讓手機用戶在查看網頁時圖片不至於比手機屏幕還大。
這一招在《Head First Moblie Web》中被稱為“Fluid Image Technique”。
視頻能夠做成響應式嗎？
除了圖片以外，還有一種常見的多媒體形式是視頻。有時在web設計中，根據需要會在頁面中加入視頻，一般視頻都是上傳到youtube、土豆/優酷、新浪等網站上後，再用鏈接的形式加入到我們的網頁中。
為什麼在iphone上看不到youtube視頻？（在境外）
在IOS上查看網頁視頻時，在不越獄安裝插件的情況下，是沒法看flash格式的視頻的，因為iphone上的浏覽器不支持Adobe Flash，這跟蘋果等公司的商業競爭政策有關，咱也沒辦法。對於這一問題，使用youtube視頻源的web設計有一個解決方案，就是將原來嵌套在網頁中的object embed格式的代碼段替換成新的代碼段。
如，舊的頁面嵌套代碼段為：
復制代碼代碼如下:
<object width="230" height="179" type="application/x-shockwave-flash" data="http://www.youtube.com/v/O-jOEAufDQ4?fs=1&h1=en_US&rel=0"><embed src=... /></object>
將其替換為：
復制代碼代碼如下:
<iframe src="http://www.youtube.com/embed/O-jOEAufDQ4" style="max-width:100%"></iframe>
可以看到，兩個視頻的出路其實是不同的，youtube將用於移動設備顯示的嵌入型視頻放在embed目錄下，這樣大部分的移動設備就可以正常觀看視頻了。
國內的視頻源可以用<iframe>這一招嗎？
分別截取土豆和sina的各一段嵌入式視頻代碼可以看到用的都是object embed方式：
土豆：
復制代碼代碼如下:
<embed
src="....swf"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
wmode="opaque"
width="480" height="400"></embed>
sina：
復制代碼代碼如下:
<div><object id='sinaplayer' width='480' height='370' >
<param name='allowScriptAccess' value='always' />
<embed pluginspage='http://www.macromedia.com/go/getflashplayer'
src='....swf'
type='application/x-shockwave-flash'
allowScriptAccess='always'
allowFullScreen='true'
name='sinaplayer'
width='480' height='370'></embed>
</object></div>
兩者的參數設置也差不多，不過土豆的代碼要簡潔很多。
現在，用<iframe>代碼塊將土豆視頻地址包起來，放入測試頁面中，會發生一個問題：
（這是圖片哦……）
不能全屏了……這是因為單獨截取了播放地址，而與flash有關的例如allowFullScreen等設置都被拋棄了。那麼用iframe這個方法顯然就有兩個問題了：
一是片源格式沒有改變，還是swf格式，仍然不能被不支持Adobe Flash的手機播放。
二是因為丟失了flash播放器的參數設置，而喪失了部分功能。
這樣顯然是不能接受的。
對於第一點，只能期待視頻網站使用更通用的視頻格式來規避各個硬件廠商之間商業競爭帶來的副作用；對於第二點，我們將繼續使用object embed的方式，因為手機看不到flash格式的親們已經找到了各種破解、插件來彌補了，所以web設計者在沒有更通用片源格式的情況下，還是沿用之前的方式好了。
但是，視頻格式的大小一般是固定的，只使用CSS而不使用javascript很難動態的根據設備的大小或者浏覽器當前的尺寸來動態改變。就視頻的寬度（width）而言，是可以設置成百分比的形式，如設置成容器的80%，那麼該視頻就會一直占其所在容器的80%的寬度，但是高度（height）就無法設定了，因為一般人都不會按比例去縮放浏覽器窗口。要麼是拉窄點，要麼是縮短點。所以，靠百分比的方式來保證視頻尺寸的縮放不太現實。
在這樣的前提下，還是希望視頻就保持一定的尺寸，而網頁的其他部分根據浏覽器的大小動態改變布局。
如視頻所示：
可以看到，在拉動浏覽器的整個過程中，視頻的尺寸是不改變的，直到浏覽器的寬度小於視頻的寬度時，視頻的寬度才變小（使用了上面提到的Fluid Image Technique）。
制作整個效果沒有什麼新的技巧，也就是將CSS的尺寸判斷又兩種變成了三種而已。具體的可以看演示代碼。
【演示代碼在這裡下載】
總結：
視頻大小的自適應單靠CSS本身似乎是做不到的。而希望移動設備可以正常的觀看頁面視頻還期待於視頻網站使用更通用的視頻格式而不是flash……
最後拿一個書中的公式收尾吧RWD = Fluid-grid layouts + CSS media queries + Fluid Image/Media + a state of mind
大意是響應式設計 = 流式網格布局 + @media語句 + 流式圖片/媒體 + 設計者的意識