如何获取YouTube高清封面图片

Alan

5 年前

今天分享一个小技巧，我们在访问 YouTube 时经常会觉得封面图不错，那么如何获取对应的高清图呢？其实仅需通过替换如下中的 Video ID 即可

https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

1	https://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

以https://www.youtube.com/watch?v=3vcS0cMp19s为例，参数 v 之后的值即为 Video ID，那么高清图的地址是：

http://img.youtube.com/vi/3vcS0cMp19s/maxresdefault.jpg

还有其它尺寸的图片

//默认封面图
http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg
//高清封面图
http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
//中等清晰度封面图
http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
//标准清晰度封面图
http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg
//最大清晰度封面图
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

//默认封面图

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

//高清封面图

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

//中等清晰度封面图

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

//标准清晰度封面图

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

//最大清晰度封面图

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

YouTube iframe 响应式显示

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/xxxxxxx" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

</div>

.videoWrapper {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

height: 0;

}

.videoWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}