今天分享一个小技巧，我们在访问 YouTube 时经常会觉得封面图不错，那么如何获取对应的高清图呢？其实仅需通过替换如下中的 Video ID 即可
|
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
还有其它尺寸的图片
|
1 2 3 4 5 6 7 8 9 10 |
//默认封面图 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 响应式显示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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%; } |
