Youtube Thumb Swap

Tagged in:
• Hugo
• Youtube
• Javascript

You can get the thumbnail image of most Youtube videos if you have their number.

1{{ $img_url := printf "http://img.youtube.com/vi/%s/maxresdefault.jpg" . }}

Possibly a good solution here from Stack Overflow:

1<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
2   <img src="my_thumbnail.png" style="cursor:pointer" />
3</div>
4<div style="display:none">
5    <!-- Embed code here -->
6</div>

This works exactly as the example. If you use display: none in an embedded stylesheet instead of inline it requires two clicks to get the video up.

Although the iframe is set to autoplay videos don’t always start. This is probably due to my system and having Youtube vids pause by default.

Links

1 Stackoverflow: how to replace youtube videos with a click to play thumbnail

• ◀ Previous
• Next ▶