HTML5: How to specify an image to be shown while the video is downloading, or until the user hits the play button?

Go to Exercise page


HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to specify an image to be shown while the video is downloading, or until the user hits the play button</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<video width="200" height="250" poster="https://www.w3resource.com/images/w3resourcelogo.gif" controls ><!-- Video element with specified width, height, poster, and controls attributes -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/php-demo1.mp4" type="video/mp4"><!-- Source of the video in MP4 format -->
<source src="https://www.w3resource.com/html-css-exercise/basic/solution/php-demo1.ogg" type="video/ogg"><!-- Source of the video in OGG format -->
</video><!-- End of video element -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->


  • The HTML code defines a video element using the <video> tag.
  • The width attribute is set to 200 pixels and the height attribute is set to 250 pixels, specifying the dimensions of the video player.
  • The poster attribute is included and set to the URL of an image (https://www.w3resource.com/images/w3resourcelogo.gif), which will be shown as a placeholder while the video is downloading or until the user hits the play button.
  • The controls attribute is included to display video controls, allowing users to interact with the video playback.
  • Within the <video> tag, <source> tags are used to specify different video formats (MP4 and OGG) using the src attribute and the corresponding MIME type using the type attribute.
  • This code creates a video player with a specified poster image to be displayed before the video starts playing.

Live Demo:

See the Pen video-poster-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.