feat: two samples of integrating keyman videos onto help.keyman.com

[Meng-Heng]

follow: #1712

video sample:

video.mp4

• Should we use the <iframe> tag or use js onclick to set the <iframe>?

-- updated on 09-Dec-2024
Fixes: #1712

[mcdurdin]

I like the idea of not embedding the video until a img preview is clicked; we'll need to tweak the code slightly to get it to work across multiple thumbnails

(This may not be relevant with the requested change, but as a side note, the getElementById() call result was not checked -- if a page did not have a matching element, it would return null, causing an error on t.addEventListener line.)

[mcdurdin]

I think we need to use querySelectorAll instead of getElementById, and match on any element that has the appropriate data-video attribute, so we can have multiple thumbnails in the same document. That means then we need to add an event listener for each element found, in a loop.

[Meng-Heng]

Yes, I'll look into this.

[mcdurdin]

This is looking good. A few minor style changes requested!

[mcdurdin]

• id should not be repeated across multiple elements -- perhaps use class instead.
• Instead of keymanThumbnails can we use video-thumbnail?

Suggested change

	<img id="keymanThumbnails" data-video="https://www.youtube.com/embed/qoLpuah72kw" src="https://img.youtube.com/vi/qoLpuah72kw/maxresdefault.jpg" width="600px">
	<img class="video-thumbnail" data-video="https://www.youtube.com/embed/qoLpuah72kw" src="https://img.youtube.com/vi/qoLpuah72kw/maxresdefault.jpg" width="600px">

[mcdurdin]

Use an IIFE to prevent pollution of global namespace:

Suggested change

	const thumbnailsList = document.querySelectorAll("#keymanThumbnails");
	window.addEventListener('DOMContentLoaded', () => {
	thumbnailsList.forEach(each => {
	each.addEventListener('click', () => {
	if(each.hasAttribute('data-video')) {
	let videoId = each.getAttribute('data-video')
	each.outerHTML = "<iframe width='600' height='315' src='" + videoId + "' allowfullscreen></iframe>";
	}
	})
	})
	})
	(function() {
	const thumbnailsList = document.querySelectorAll(".video-thumbnail");
	window.addEventListener('DOMContentLoaded', () => {
	thumbnailsList.forEach(thumbnail => {
	thumbnail.addEventListener('click', () => {
	if(thumbnail.hasAttribute('data-video')) {
	let videoId = thumbnail.getAttribute('data-video')
	thumbnail.outerHTML = "<iframe width='600' height='315' src='" + videoId + "' allowfullscreen></iframe>";
	}
	})
	})
	})
	})();

• I've also renamed the variable each to thumbnail to better represent what it is.
• I renamed the selector from #keymanThumbnails to .video-thumbnail (a class rather than an id, and singular rather than plural, and 'video' instead of 'keyman' to clarify what it is for, and finally, using kebab-case instead of camelCase 😁)

[Meng-Heng]

Thanks @mcdurdin. I'm taking notes, this is so unfamiliar to me. 😅

[mcdurdin]

LGTM!