隨版面調整的 youtube 影片

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

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

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


在設定 css 就可以了。

  1. .video-container {   
  2.     positionrelative;   
  3.     padding-bottom56.25%;   
  4.     padding-top30pxheight0overflowhidden;   
  5. }   
  6.     
  7. .video-container iframe,   
  8. .video-container object,   
  9. .video-container embed {   
  10.     positionabsolute;   
  11.     top: 0;   
  12.     left: 0;   
  13.     width100%;   
  14.     height100%;   
  15. }  


出處: Responsive Youtube Embed

留言