DEV Community

Cover image for Custom YouTube thumbnail and play button for embedded iframe video
William L'Archeveque
William L'Archeveque

Posted on

8

Custom YouTube thumbnail and play button for embedded iframe video

I searched for the perfect solution to show a custom high quality thumbnail for my embed videos. I did not want to use the more complex Youtube Javascript API solution. Here is how I archived the obstacle of using a custom thumbnail or Youtube maximum resolution thumbnail and a custom play button.

The following code uses jQuery but this could be done in Vanilla Javascript.

Technical explanation to use a custom Youtube thumbnail

  • First, I integrate my Youtube video with a custom div and custom thumbnail if needed. The data attribute tags are used to provide the Youtube video id and the custom thumbnail URL.

  • Then, on page load, for each video on a page, the Javascript code creates a placeholder with the needed thumbnail (custom or Youtube maximum resolution one). A customized play button is added on top using CSS.

  • Finally, a click event listener is added to the placeholder to create an embed iframe when clicked. When showing the iframe the placeholder is hidden.


The explanation is short and sweet, but take a look at the code and let me know what you think !

Youtube Custom Thumbnail Image: Cédric VT (@cedric_photography) from Unsplash

Cover Image: PJ Gal-Szabo (@pjgalszabo) from Unsplash

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (5)

Collapse
 
mikey_bodine profile image
Mike Bodine

I have a page of videos that I used this solution on, and it's working for several of them, but not all of them. Any ideas why some would work and some would not?

Collapse
 
fabiofernandes6 profile image
Fabio Fernandes

Thanks, this is really helpful! Have you found a way to automatically play the video once the user clicks the thumbnail? Currently it loads the iframe but it doesn't play the video. Thanks!!!!

Collapse
 
fabiofernandes6 profile image
Fabio Fernandes

In case someone wants to know this:
Some people attach autoplay=1, but you also need to attach mute=1 to make it autoplay. That works, but with no sound (of course). It seems like the browsers made sure we can't play the video automatically without muting them. Which makes sense for limiting the bad guys, but it also affects us the good guys :/

Collapse
 
fungayi263 profile image
Kofie • Edited

Hi thanks for this it works like a charm. I have a small problem where I cant play embedded video in full screen mode. Any idea how I can work around this?

Thanks again

Collapse
 
fungayi263 profile image
Kofie

Oh I have figured it out.
In the createIframe function, I added iframe.setAttribute("allowfullscreen", "1");

Works perfectly

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay