2

I am attempting to embed a YouTube video playlist using the following technique provided by YouTube itself:

<iframe src="https://www.youtube.com/embed/videoseries?list=PLCAVPALzt27-IbMJ2bqRwGay9R1EEtC5X" frameborder="0" height="658" width="1170"></iframe>

YouTube allows us to upload an image placeholder but once embedded on our website, it creates an extremely low-res placeholder. Is there any sort of work-around for this? If I can't figure out then I'll probably just do a still image that links to YouTube itself. Once the video starts playing it's fine but we're trying to keep it clean if it's going into a slider/hero placeholder. Thanks.

Improve this question

3 Answers 3

Reset to default
3

Something like this?

HTML code:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="video">
    <div class="video-box">
      <a class="thumbnail-link">
        <img src="http://i.ytimg.com/vi_webp/67OAp3FW6Dw/maxresdefault.webp" class="video-thumbnail">
        <iframe class="video-frame" width="100%" height="100%" src="https://www.youtube.com/embed/videoseries?list=PLCAVPALzt27-IbMJ2bqRwGay9R1EEtC5X&vq=hd720&showinfo=0&autohide=1&color=white&controls=2&modestbranding=1&theme=light" frameborder="0" allowfullscreen>
        </iframe>
      </a>
    </div>
  </div>



</body>

</html>

CSS code:

.video{
    margin-bottom:14px;
    width:1170px;
    height:658px;
}
.video-box{
    height:925px;
    width:1646px;
    position:relative;
}

.video-thumbnail{
    z-index:300;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.video-frame{
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.thumbnail-link .video-thumbnail{
    display:block;
}

.thumbnail-link:hover .video-thumbnail{
    display:none;
}

Plunker

You can always get the high res thumbnail image by adding maxresdefault.webp at the end of your URL. Example:

http://i.ytimg.com/vi_webp/67OAp3FW6Dw/maxresdefault.webp
Improve this answer
1
  • webp didn't work for me (example), but jpg did (example).
    – thdoan
    Commented Jun 26, 2019 at 22:01
3

Each YouTube video has 4 generated images. They are predictably formatted as follows:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (ie. one of 1.jpg, 2.jpg, 3.jpg) is:

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

For the high quality version of the thumbnail use a url similar to this:

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

There is also a medium quality version of the thumbnail, using a url similar to the HQ:

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

For the standard definition version of the thumbnail, use a url similar to this:

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

For the maximum resolution version of the thumbnail use a url similar to this:

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

All of the above urls are available over https too. Just change http to https in any of the above urls. Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example urls above.

<img src="http://img.youtube.com/vi/Q1wb1lS09Sg/maxresdefault.jpg">

jsfiddle demo

Improve this answer
0
2

Google brought me here when I was looking for help to the same blurry thumbnail problem. I found this great solution:

Simply replace the old embed playlist spell...

/embed/videoseries?list=

...with this:

/embed&listType=playlist&list=

...and you get a HD quality placeholder to your embedded playlist player!

Additional spells (such as &rel=0&showinfo=1&modestbranding=1 etc.) explained at: https://developers.google.com/youtube/player_parameters

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.