There is a video on the computer, you need to add a poster above the player, there is also a black screen and a button separately. When you click on the orange button start video. https://i.stack.imgur.com/9sBbP.jpg - Link to poster

<div class="box"> <video width="360" height="200" controls="controls" poster="images/play_video.jpg"> <source src="int_board.mp4"> </video> </div>

This is what the result is https://imgur.com/t1MDBOB

PS on the screen you can see a black shadow on the left and on the right, how to remove it?

  • To insert a picture above the player - just paste it <img src = ""> before the diva with the player or into the div with the player but the above video .... And just do not understand what exactly is needed and what you can’t do? - Nilsan
  • imgur.com/t1MDBOB - I inserted a poster but it is below the control buttons and as if the overlap is going, I would like to remove this white button and replace it with an orange with a black background and start the video on click. Also on the screen you can see an incomprehensible shadow on the right and left, how to remove it? - Vadim Januschik

1 answer 1

Something like this)

  $(".button_play").on("click", function(){ $('#video')[0].play(); $('.button_play').hide(); }); $("#video").on("click", function(){ $('#video')[0].pause(); $('.button_play').show(); }); 
 .button_play { background: url('https://i.stack.imgur.com/9sBbP.jpg') no-repeat center center; width: 100%; height: 100%; background-size: cover; cursor: pointer; position:absolute; top:0; z-index: 10; left:0; } .video_block { width: 600px; height: 400px; position:relative; float:left; } #video { width: 100%; height: 100%; background: #000; float:left; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="video_block"> <div class="button_play"></div> <video id="video" height="auto" controls="controls" preload="none"> <source type="video/mp4" src="https://mobclip.net/uploads/files/2018-11/1541658097_ariana-grande-breathin.mp4"> </video> </div>