Why set custom thumbnail for youtube playlist embed and how?

WE had written an article on setting custom thumbnail for youtube embed but that trick doesn’t work if you are trying to embed youtube playlists. In this post we are going to cover just that. One major drawback of the default youtube playlist player is their unappealing thumbnail which results in fewer number of playbacks and the other being the increased load time. Codegena Youtube embed code generator takes care of both these issues. Thus by setting a custom thumbnail for your playlist embed you could improve the number of total playbacks which could result in more page visit duration. Moreover, this on demand player loads the actual playlist only when the image is clicked thereby increasing the webpage performance.

Steps to embed youtube playlist with custom Thumbnail

  1. Go to codegena youtube playlist embed code generator
  2. Enter the playlist url in the url field.
  3. Enter the player dimensions.
  4. Turn on “Load Async Player ” option. This should enable the thumbnail field located below.
  5. Enter the url in the thumbnail field and hit generate button located at the end.

NOTE: Higher resolution images may cause loading the player slowly .The preview won’t work while using this feature. To try out the code use htmleditor.

Syntax for embedding youtube playlist with custom thumbnail

<!--Syntax for embedding youtube playlist with custom thumbnail-->     
<div class='youtube' id='videoseries?list=PLAYLIST_ID' data-params='&theme=dark&autoplay=1&autohide=2' src='IMAGE_URL' style='width:500; height:294;'></div>
<script src=''></script>
<!-- Code by Codegena -->

In the above code replace PLAYLIST_ID with the actual playlist id (and not video id) and IMAGE_URL with actual image url.

Create a Youtube Playlist and set a Custom Thumbnail

If you want to create a youtube playlist from a list of videos all you have to do is follow the steps below.

  1. Go to codegena youtube embed code generator
  2. Enter the primary video url in the first field.
  3. Enter the dimensions of the player below.
  4. Scroll down to “Create youtube playlist” option. In this field enter the video ID’s each separated by a comma.
  5. Finally hit generate button and copy the code.

Syntax for creating a youtube playlist and set custom thumbnail

 <!-- Create Youtube Playlist and set thumbnail -->   
<div class='youtube' id='VIDEO_ID' data-params='?&theme=dark&autoplay=1&autohide=2&playlist=ID_2,ID_3' src='IMAGE_URL' style='width:500; height:294;'></div>
<script src=''></script>
<!--Code By Codegena-->

In the above code replace VIDEO_ID with the main video id and ID_2,ID_3,.. with the video ids of video you like to add to playlist. Finally replace IMAGE_URL with the actual image url.

You may also like : Disable HTML5 in youtube embed player and force flash player

Share this article if you find it useful and leave your suggestions and opinions below.

Shan Eapen Koshy

Shan Eapen Koshy is a web developer, technical blogger and a YouTuber. He has created several web applications and has written many app scripts.

Follow Us

Don't be shy, get in touch. We love meeting interesting people and making new friends.