YouTube embedded video: set different thumbnail

There’s a nice workaround for this in the sitepoint forums:

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
   <img src="https://stackoverflow.com/questions/7199624/my_thumbnail.png" style="cursor:pointer" />
</div>
<div style="display:none">
    <!-- Embed code here -->
</div>

Note: To prevent having to click twice to make the video play, use autoplay=1 in the video embed code. It will start playing when the second div is displayed.

Leave a Comment