YouTube embed alternative to poster

[Mark_E]

For self hosted videos I’ve used the Kirby ‘poster’ ((video: …) | Kirby CMS) attribute to specify an image to be shown before the video is clicked.

But I’m now trying to embed some YouTube videos. poster is not supported by YouTube. So how do I get a poster / thumbnail image to display before the video is clicked?

In Safari the embedded video has a nice preview image (poster / thumbnail whatever it is called):

But in Chrome and Safari a very ugly image is displayed:

Here’s my code:

<figure>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/M6F5Cu-VxJc?si=adRP_pz0P_s8LLjt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</figure>

figure:has(iframe) {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	margin-bottom: 4rem;
	}

figure iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

I’ve noticed that if I remove the CSS and allow the video to display at the default fixed width, a thumbnail image is used. See below. But as soon as I make the video responsive, the thumbnail in Chrome and FF disappears.

So my question is, how do I make videos responsive AND display a poster/thumbnail?

[Mark_E]

I think the video is missing the high res YouTube thumbnail. So when the iframe is wider than 640px, and presumably the high res thumbnail is needed, I’m getting the 3 dots instead. It’s frustrating that browsers are not defaulting to the next biggest thumbnail available.

Self-hosted videos using the Kirby posters attribute, start when the poster is clicked. I’m trying to recreate this, with an image, that when clicked reveals and starts to play the video. I’ve got the following code, but I’m having to click twice. Once to reveal the video and a second time to play the video. How does the Kirby poster get the video to play on one click?

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
	<img src="assets/images/etching.jpg" style="cursor:pointer" />
</div>
<div class="video-container" style="display:none">
	<iframe src="https://www.youtube.com/embed/M6F5Cu-VxJc?si=adRP_pz0P_s8LLjt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay=1; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

.video-container {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	margin-bottom: 4rem;
	}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}