How can I add a button over a video in HTML?

Question

This is my first time working with HTML other than basic websites.

I have a video-based social media app and I want to share posts with a link like instagram for example. This link will be a website with a video playing in loop until the user clicks a button over the video. Once this button is pressed, another video plays instead.

How do I add the button over the video so when I click on it another video plays? This is what I have.


                
                    
                        
                        Cute cat
                        
                        This is a card trick I learned when I was at Magic School
                                            
                        
                          Get it now

user_8142226 · Answer

First of all, I see you are using an img tag with a video source. Use a video tag instead.

Bootstrap is a tool intended to make your life easier when it comes to developing the UI of a website. Use it when it is useful. For displaying a button over a video, it's more of an overkill than an aid.

Below, you will see HTML and CSS code which display a button over a video. The important thing to know is: when you make an element position: relative, all the child elements which are position: absolute will be positioned inside the parent element. In the code, we take advantage of this behavior to show .video-content over .video.

.video-view {
  position: relative;
  width: 300px;
  height: 100px;
}

.video-view .video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #ccc;
}

.video-view .video-content {
  position: absolute;
  bottom: 0px;
}

user_9060223 · Answer

You should use the video HTML tag to insert videos. Read more here. You can then specify the source of the video with the element source inside the element video. Set the attribute src in source to a link of your video and specify its type.

To create a custom button, you can create a container which contains both the video and the custom button. The button will be position-ed to absolute using CSS to make it appear at the right position in the video (adjusted using CSS). Then, attach an event listener on click to the button to change the source of the video.

Here's a very simple working example below. Click the button with ! on hovering the video to change its source.

const video = document.querySelector('video')
const source = document.querySelector('source')

video.appendChild(source)
video.play()

const changeVideoButton = document.querySelector('#changeVideo')
changeVideo.addEventListener('click', e => {
  video.pause()
  
  source.setAttribute('src', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4')
  
  video.load()
  video.play()
})

#container {
  position: relative;
}

video {
  width: 300px;
}

#changeVideo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 25px;
  height: 25px;
  opacity: 0;
  transition: opacity .3s ease;
  cursor: pointer;
  
  /* Additional styles just to increase visual appeal */
  border-radius: 50%;
  background: #FFFFFFDD;
  color: red;
  font-weight: bold;
  line-height: 25px;
  text-align: center;
  /* End */
}

/* On hovering the video, show the button */
video:hover~#changeVideo {
  opacity: 1;
}

#changeVideo:hover {
  opacity: 1;
}

How can I add a button over a video in HTML?

2 Answers