Как добавить кнопку запуска видео выше плеера

160

05 апреля 2019, 07:30

Имеется видео на компьютере нужно добавить постер выше плеера, так же отдельно есть чёрный экран и кнопка. При нажатии на оранжевую кнопку запуск видео. https://i.stack.imgur.com/9sBbP.jpg - Ссылка на постер

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

Вот, что в итоге получается https://imgur.com/t1MDBOB

P.S. на скрине видны слева и справа чёрная тень, как её убрать?

Answer 1

Как то так)

  $(".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>