Jump to content
Sign in to follow this  

HTML: Image displays after video background

Recommended Posts

Hi everyone,

Have been working with video backgrounds and everything is going great. I have surfed the web and I have been trying to find out how to display an image after a video plays. I know how I can do a poster image before a video plays, I want a poster image to be displayed after the video is done. Now I don't know where I need to post this so I figure I start here. I will post my code down below so you can take a look at what I already have.

Thanks in advance!

<video onloadstart='this.volume=0.3' id='bg-video-index' onclick='playVideo' autoplay>
  <source src='media/bg-video/bg-video.mp4' type='video/mp4'>
  Your browser does not support HTML5 video.

<script src="text/javascript">
function playVideo(){
    var video = document.getElementById('bg-video-index');
        window.location = 'media/images/bg/logo.png';


Share this post

Link to post
Share on other sites

What your code currently does is to redirect the browser to an image when the video ends. What I think you actually want to do is to display an image in place of the video on the same page. For that, you need to have an <img> element on the page styled the same was as the video that's invisible. When the video ends, hide or delete the video and make the image visible using the style property or DOM methods. Another option is to use Javascript to set the background image property of the container after deleting the video.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...