使用boostrap框架製作rwd的網頁，雖然官網內有可使用 <iframe>的具有響應式特性的嵌入內容的方式可以使YouTube的影片可以自適應，但如果同個頁面要掛上很多影片的話那讀取就需要花上不少時間了，因此使用預覽圖、縮圖的話對節流上是非常有幫助的
以下，以陳建瑋Jacky Chen透早就出門的mv為例，先取得網址的值 <video-id>，而 x7_jBkE8AgA 就是影片的值。
https://www.youtube.com/watch?v=x7_jBkE8AgA
預覽圖
YouTube 提供五種不同圖片不同尺寸的影片預覽圖，
分別為：120px * 90px、320px * 180px、480px * 360px、640px * 480px、1280px * 720px。
例如：
120px * 90px
http://img.youtube.com/vi/<video-id>/default.jpg
320px * 180px
http://img.youtube.com/vi/<video-id>/mqdefault.jpg
480px * 360px
http://img.youtube.com/vi/<video-id>/hqdefault.jpg
640px * 480px
http://img.youtube.com/vi/<video-id>/sddefault.jpg
1280px * 720px
http://img.youtube.com/vi/<video-id>/maxresdefault.jpg
maxresdefault.jpg
縮圖
480*360 影片大圖
http://img.youtube.com/vi/<video-id>/0.jpg
120*90 影片開始一點點
http://img.youtube.com/vi/<video-id>/1.jpg
120*90 影片中間
http://img.youtube.com/vi/<video-id>/2.jpg
120*90 影片結尾
http://img.youtube.com/vi/<video-id>/3.jpg
120*90 影片大圖
http://img.youtube.com/vi/<video-id>/default.jpg
- 縮圖的部份有 0.jpg, 1.jpg, 2.jpg, 3.jpg, 的圖片
- 0.jpg的部份是主縮圖，大小為 480 * 360 px
- 其他的 1.jpg, 2.jpg, 3.jpg, 圖是影片中其中的小截圖，大小為 120 * 90 px
0.jpg
1.jpg
2.jpg
3.jpg
用 php 的方法取 youtubeID
1 2 | preg_match('/watch\?v=([^&]*)/','https://www.youtube.com/watch?v=0TsmU0-_q2s',$match); $match[1]; //youtubeID |