今天想在博客分享一個非常精彩的優酷視頻《視頻: 林丹VS鮑春來表演賽》，拷貝好優酷的調用代碼：
粘貼到文章中，保存測試的時候發現了問題，窗口是固定的，根本無法根據瀏覽器窗口的大小自動調整比例，移動端顯示更是出現窗口溢出的問題，如何解決，我考慮了好幾種方式。
第一種嘗試，直接修改寬高屬性：
直接把embed中的width和height屬性調整為百分比，代碼如下：
但是瀏覽器都不識別，寬度倒是自適應的，但是高度始終都在150px左右，如下圖，顯示效果不佳。
第二種嘗試，純CSS的解決方案：
在網上搜到了一種採用純CSS實現高度與寬度成比例的效果的方法，大致的思路如下：
padding屬性，是可以用百分比進行設置的，這個百分比是相對於其父元素的寬度而言的，即使對於 padding-bottom 和 padding-top 也是如此。另外，在計算 Overflow 時，是將元素的內容區域（即 width / height 對應的區域）和 Padding 區域一起計算的。換句話說，即使將元素的 overflow 設置為 hidden，“溢出”到 Padding 區域的內容也會照常顯示。
綜合上面所述，我們可以使用 padding-bottom 來代替 height 來實現高度與寬度成比例的效果。因為視頻高度是其寬度的 83%（寬度：480，高度：400），所以我們將 padding-bottom 設置為寬度的 83%。同時將其 height 設置為 0 以使元素的“高度”等於 padding-bottom 的值，從而實現需要的效果。代碼如下：
測試結果：QQ瀏覽器正常顯示，但是火狐瀏覽器、Chrome瀏覽器、IE和移動端測試的時候，視頻都無法在網頁中顯示出來，故此方法放棄。
第三種嘗試，WordPress中一種視頻插件使用方案：
原理：在html語言裡邊，高度（寬度）使用百分比的時候是有要求的，就是他的外層（父層）必須有一個指定的高度（寬度），這樣才可以得到這個百分比數。所以在外層div中設置百分比寬度和高度，然後再在embed中使用百分比寬度和高度。代碼如下：
測試結果：QQ瀏覽器正常顯示，但是火狐瀏覽器、Chrome瀏覽器、IE和移動端測試的時候，視頻都無法在網頁中顯示出來，故此方法放棄。
最後一種嘗試，採用腳本控制寬高比例的方案：
這也是最後採用的方案。由於是在博客編輯器裡面編輯的內容，所以一直想通過CSS的方法來解決，可是上面的方式都有明顯的缺陷，最終被迫採用腳本來控制列的高度，代碼如下：
測試了一下，火狐瀏覽器、QQ瀏覽器和Chrome瀏覽器下顯示均正常，移動端測試也沒問題，唯一的遺憾就是沒有實現實時自適應，調整窗口寬度之後需要刷新，高度才能恢復到與寬同比例。