Poster Image

Show Poster Image directly from Video

Poster image is first instance on video to impress & engage user to play video. By keeping poster image clear & from video will make user interested to click on play button.

In continuation to my earlier post for Video, I further dig-out on video element.

While working on video element we also have to show a still image on video as a placeholder image. Until user click on the video to play it we need to show user a still from video.

Popular ways we know to do this:

  • We add a image in a poster attribute on video element
  • We leave out the poster attribute to show the first frame of the video

First Frame of Video

If we choose to omit the poster image attribute form the video element, video will show the first frame as a poster on video placeholder until user clicks to play video. But in this case, we do not have any control on what the video element will show on user while video loads on browser. It may appear as a blank or dark placeholder on some videos.

<video width="300" height="150">
   <source src="BigBuckBunny.mp4" type="video/mp4" />

Poster Image

If we opt-in to have poster image on video, we need to have another image which shows a image from video.

<video poster="path/to/the/image.jpg" width="300" height="150">
   <source src="BigBuckBunny.mp4#t=2" type="video/mp4" />

In this case we are increasing the http request which is not good. To solve this without increasing any http request and having total control on what to show on placeholder of video we can select any one frame from the video itself.

Selected Frame from Video

Yes, we can choose which frame from video should be visible as a poster image on video as placeholder image. To show specific still from video, just append time in second (#t={second}) at the end of the url while passing the source url of video.

<video width="300" height="150">
   <source src="BigBuckBunny.mp4#t=2" type="video/mp4" />

This is it! You will be able to see the placeholder of the video from that specific time.

As always do let me know your feedback in the comment box below.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

17 comments On Show Poster Image directly from Video

  • My first time visiting, been looking around and very much like the way in which you compose your posts. This article is exactly the info I was looking for. Works just as stated but it should be noted that video begins playback from placeholder frame not beginning of video. None the less great site!

  • As above said, the video plays from that frame, but if you’re just looking for a simple placeholder #t=1 is perfect and plays basically at the beginning so it’s a nice “hack” to just get the job done!

    Thanks for this!

  • This is just what i wanted. Thanks ton buddy!!

  • Super explanation, cheers 🙂

  • Good content, keep up the good work…

  • I got this web site from my buddy who informed me on the topic of this web page and now this time I am visiting
    this website and reading very informative posts here.

  • Gaddam chetan reddy

    not working

  • Its not work when I uploaded the code into a server

  • Hi, does this feature work in Internet Explorer ? I tried this in IE and it does not work. (IE 11)

  • Hi,

    This solution does not work for me.
    When I use an iPad to test it no poster image or the frame indicated is displayed.

    As everybody stated before, the code is forcing the video to start playing at that frame which is fine for me.
    But what I was looking for was a solution to make the “Poster” image work on a tablet.
    Nevertheless a good post I’ve learned something.
    kind regards

  • Adding #t= will greatly increase the load time of the page because the browser will automatically preload the video. To solve this, add the preload=”metadata” attribute. This only allows the metadata and first frame of the video to be preloaded. preload=”metadata” will automatically show the first frame of the video on desktop, but not on mobile. So then use a small #t value to move the player to the first frame on moblie. I use #t=0.1

    Example of a video that will display the first frame as the poster on mobile without having to preload the video:

  • when preload is none the it will not work

    • I guess, if you are adding a video, you would want user to see what is in the video so, there will be either Poster on the Video or any frame from the video itself. And I wanted to show that we can display a frame from the video itself so you would need preload in that case, otherwise you don’t use it at all.

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.