I was playing around with my old website design I created many years ago, back when you made complicated graphic designs by slicing them up and putting them together in tables. This time I was experimenting with using CSS layering, trying to accomplish the same thing as before, only much more simplified using html5 video instead of flash video along with transparent png’s as overlays. It wasn’t long before I ran into some limitations. I was having pretty good luck layering the png over the video. I was even able to add a couple of animated gifs as enhancements. But it really starts to get complicated when you try to layer too many items (may also have to do with my limited CSS knowledge).
video tag works. I wanted the video to play automatically, check. Then when the video completed, I wanted a thumbnail to fill the video area. You can have a poster frame for the video before it begins, but html5 does not have a parameter for a poster to appear at the end of the video. Some research turned up this discussion on StackOverflow about the subject. I think the answer by far is the most simple solution (but requires video editing capabilities). When the video finishes it will freeze on the very last frame of video. By adding your desired poster as a single frame at the end of your video, you basically accomplish this. But I wanted an animated gif loop for my purposes. I came up with an easy technique using info gleaned from w3schools. My method makes the video hidden when complete, revealing an animated gif beneath. Of course that complicated the project by adding javascript. And then there’s the issue of responsivness.
Here’s the working example