隨版面調整的 youtube 影片

一般來說要在網頁嵌入 youtube 影片，只要到 youtube 複製他提供的 html 就可以了，可是現在網頁考慮各種載具的解析度，往往需要讓畫面可以隨解析度調整，youtube 就沒辦法直接達成這個要求，不過只要稍微調整一下 css，就可以做到這個要求了。

首先先用一個 div 把影片的 html 包起來。

view plaincopy to clipboardprint

1. <div class="video-container">  
2.     <iframe src="http://www.youtube.com/embed/" frameborder="0" width="560" height="315"></iframe>  
3. </div>  

在設定 css 就可以了。

view plaincopy to clipboardprint

1. .video-container {   
2.     position: relative;   
3.     padding-bottom: 56.25%;   
4.     padding-top: 30px; height: 0; overflow: hidden;   
5. }   
6.     
7. .video-container iframe,   
8. .video-container object,   
9. .video-container embed {   
10.     position: absolute;   
11.     top: 0;   
12.     left: 0;   
13.     width: 100%;   
14.     height: 100%;   
15. }  

出處: Responsive Youtube Embed