CODEWITHSUNDEEP
htmlcss
david stephen
david stephen

Reputation: 349

How to overlap div inside video element tag?

I want to create my custom video controls, overlapping element inside video tag not works. I want to make controls-container in bottom like common video player.

<style>
    body {
        margin: 0;
    }
    
    #controls-container {
        position: absolute;
        bottom: 0;
    }
</style>

<video id="video-player" src="video.mp4">
    <div id="controls-container">
        <div id="duration-bar">
            <input type="range" value="0">
        </div>
        <div id="controls">
            <button>play</button>
            <input type="range" value="0">
        </div>
    </div>           
</video>

Upvotes: 0

Views: 432

Answers (1)

painotpi
painotpi

Reputation: 6996

You could achieve the css part of it with just basic positioning. You'll have to write some javascript to rewire the events.

body {
  margin: 0;
}

video {
  width: 100%;
}

.video-container {
  width: 400px;
  border: 5px solid;
  position: relative;
}

#controls-container {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: black;
  z-index: 1;
}
<div class="video-container">
  <video id="video-player" src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></video>
  <div id="controls-container">
    <div id="duration-bar">
      <input type="range" value="0">
    </div>
    <div id="controls">
      <button>play</button>
      <input type="range" value="0">
    </div>
  </div>
</div>

Check out this pen for an example.

Upvotes: 1

Related Questions