videoseries?lis

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.

10.03% popularity Vote Up Vote Down

: Does single focus keyword include other site information? Lets say I have a website for a campground in Texas and am trying to search engine optimize it so potential customers can easily find

@Jamie184

Posted in: #Keywords #Seo

3 Comments

: Chrome's built-in PDF viewer won't display our PDF forms On our web site, we have numerous Acrobat PDF forms. When users click on those forms, if they are using Google Chrome, they get this

@Jamie184

Posted in: #GoogleChrome #Pdf

3 Comments

: Using sub-directory vs single directory urls I'm creating a location based site and was debating between two styles of writing urls. The first shows the name of the restaurant followed by the

@Jamie184

Posted in: #Directory #Http #Seo #Subdirectory #Url

1 Comments

: On Google Analytics, is it possible to trace the behavior path of a conversion back to the landing page? On Google Analytics, I am looking to see the exact path that a user took up until

@Jamie184

Posted in: #Analytics #Google #GoogleAnalytics

1 Comments

Login to post a comment!

3 Comments

Sorted by latest first Latest Oldest Best

@Fox8124981

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: developers.google.com/youtube/player_parameters

10% popularity Vote Up Vote Down

@Jessie594

Each YouTube video has 4 generated images. They are predictably formatted as follows:
img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg 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:
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:
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:
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:
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:
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

10% popularity Vote Up Vote Down

@Hamaas447

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:
i.ytimg.com/vi_webp/67OAp3FW6Dw/maxresdefault.webp

10% popularity Vote Up Vote Down

Feed

: Embed YouTube playlist/video using high-res image placeholder 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?lis

More posts by @Jamie184

: Does single focus keyword include other site information? Lets say I have a website for a campground in Texas and am trying to search engine optimize it so potential customers can easily find

: Chrome's built-in PDF viewer won't display our PDF forms On our web site, we have numerous Acrobat PDF forms. When users click on those forms, if they are using Google Chrome, they get this

: Using sub-directory vs single directory urls I'm creating a location based site and was debating between two styles of writing urls. The first shows the name of the restaurant followed by the

: On Google Analytics, is it possible to trace the behavior path of a conversion back to the landing page? On Google Analytics, I am looking to see the exact path that a user took up until

Login to post a comment!

3 Comments

Back to top | Use Dark Theme