This is surely more straightforward isn't it?
- Have H5P element hidden yet available on the page
- Have responsive image sitting in the course
- When clicked, load the h5p object in place of the image
If you want multiple items on the page - just do the same. As they are all visible, it will work. You're not hiding videos, you're just swapping in/out content.