DEV Community

Cover image for Custom YouTube thumbnail and play button for embedded iframe video

Custom YouTube thumbnail and play button for embedded iframe video

William L'Archeveque
Full-Stack Devops & Web Developer. Enthusiast Helper. Freelancer for 7 years, now having fun working at Centiva. Specialized in Laravel PHP, AWS Cloud and cartwheeling.
・1 min read

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

Discussion (0)