<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-12"> <video id="player_bootstrap" style="z-index: 99; height:auto;"> <source src="https://mp4zvezda.cdnvideo.ru/mp4/t9nqzrj0000knjl96oz1megj300.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </div> </div> <div style="background: rgba(34,34,34,0.8); z-index:999;margin-top:-3em;" class="row"> <div class="col-sm-1"><i style="font-size: 1.5em; color: #E30B18;" id="play" class="fas fa-play-circle"></i><i style="display:none;" class="fas fa-pause-circle"></i></div> <div style="color:#fff;font-seight:600;" class="col-sm-1"> 1:00/45:00 </div> <div style=" height: 5px; background-color:#E30B18;" class="col-sm-8"></div> <div class="col-sm-1"><i class="fas fa-cog"></i></div> <div class="col-sm-1"><i class="fas fa-expand-arrows-alt"></i></div> </div> </div>

//var vid = document.getElementById("player_bootstrap"); $('#play').click(function(){ alert('9'); //vid.play(); });