Best solution for February 2023

Need the simplicity of the original method, but preventing video and other media content loading until the user actually wants it.
The modal window video pop-up is trying to be too clever, and it is fiddly to mess around with.

Ideally, we need some approach that allows us to load representative images, and then content loads when it is selected. Like the original version, but in a smarter way. The modal windows work in the same way as show/hide content, so we could simply include that on the page, but the same issue will occur - namely the user could start the video playing, then move off elsewhere, or close the show/hide div and it will all keep playing. The original method used iframes which actually disappear/unload once the user chooses a different button option. So one thing to explore further is making use of iframes in a different way...?

Research:

This is the kind of behaviour we want:
BBC Bitesize - Animal cells - The key features of cells and their functions - OCR 21st Century - GCSE Biology (Single Science) Revision - OCR 21st Century - BBC Bitesize
- this actually loads a new page depending on your choice - clicking 'revise', 'Video', 'Test' actually loads an entirely different page. Not really an option for th way we are building these.

However, having lots of these then becomes part of the issue - having multiple videos embedded on one webpage but they suggest using Modal windows that don't pre-load - that's the exact solution I was going for with the latest solution above. It's not ideal.

Solution has to be to load no content other than optimised images, and then trigger a video play if chosen.

That means the modal approach *is* the correct one, but I need to implement it better.

This is the kind of approach that I'm going for:
Live Demo: Example of Embedding YouTube Video inside Bootstrap Modal (tutorialrepublic.com)

... but unlike the example page, our video keeps playing when the modal window is closed

Next attempt is to use lightbox video embed - but that's not far off what we've already tried.
I also don't like disabling the modal behaviour so when you click away from the popped-up window you can't close it. That feels broken in itself.

This kind of solution is perhaps the best way for us to proceed:
https://pagespeedchecklist.com/on-demand-embedded-videos

https://pagespeedchecklist.com/responsive-embedded-videos

I'll work on something similar to that - with this approach, we have an image that loads to show there is video content, and then that gets replaced with playing video content on the page. If they press another video, that's the user's fault because the other video is still playing.