HTML5 Video and Background Images

Stack Overflow can be a great place to get the mind going and this evening was no exception. A question was posted asking how to get a HTML5 video’s poster image to fill the element if its aspect ration differs.

Firt off, let’s take a piece of straightforward code for embedding a video in a page:

But this poster image doesn’t quite fit in the video as it’s a different aspect ratio to the video itself.

So what can we do?

The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:

Great inspiration for my page! Thank you.
Is it why there’s a picture showed when the video stops? But I tried several times with your code but it didn’t work on my page. What would you suggest I can do to show the poster before and after playing a video?