There is a video that starts when you click on a block with a description.

It is impossible to activate the action of the button with id="stop" so that the video stops, hides and returns to its original appearance.

If the button is moved out of the block, it works. How to activate the close button on top of the video itself and which is located in the upper right corner of the block?

Code:

 $('#video').click(function() { $('#video-inside')[0].play(); $('#video-inside').show(); $("#stop").show(); }); $("#stop").click(function() { if ($('#video-inside').get(0).play) { $("#video-inside").get(0).pause(); $("#video-inside").hide(); $(this).hide(); } }); 
 #video { position: relative; z-index: 1; } #video video, #stop { display: none; } #video video, .embed-responsive { z-index: 2; } #stop { position: absolute; z-index: 999; top: 0; right: 0; border: none; background: transparent; color: #fff; font-size: 30px; } #stop:focus { outline: none; } #video .video-description { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 550px; } 
 <link href="https:////maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https:////maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <section id="video"> <div class="container text-center"> <div class="video-description"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjQ1_aoVNrwReLf3gnXnKRyztZIDQf_MFXidBpSlBvwWAKl2vj" width="100" height="57" alt="play video"> <h4>Big Buck Bunny.</h4> <p>The perfect video of Big Buck Bunny.</p> <span>00:10</span> </div> <div class="embed-responsive embed-responsive-16by9"> <video class="embed-responsive-item" allowfullscreen width="100%" id="video-inside" controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <button type="button" id="stop">&times;</button> </div> </div> </section>

    1 answer 1

    Problem in spylty to parent element. Since the button is nested in the parent <section id="video"> then on click the event pops up and the movie starts again.

     $('#video').click(function() { $('#video-inside')[0].play(); $('#video-inside').show(); $("#stop").show(); }); $("#stop").click(function(event) { if ($('#video-inside').get(0).play) { $("#video-inside")[0].pause(); $("#video-inside").hide(); $(this).hide(); event.stopPropagation(); } }); 
     #video { position: relative; z-index: 1; } #video video, #stop { display: none; } #video video, .embed-responsive { z-index: 2; } #stop { position: absolute; z-index: 999; top: 0; right: 0; border: none; background: transparent; color: #fff; font-size: 30px; } #stop:focus { outline: none; } #video .video-description { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 550px; } 
     <link href="https:////maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https:////maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <section id="video"> <div class="container text-center"> <div class="video-description"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjQ1_aoVNrwReLf3gnXnKRyztZIDQf_MFXidBpSlBvwWAKl2vj" width="100" height="57" alt="play video"> <h4>Big Buck Bunny.</h4> <p>The perfect video of Big Buck Bunny.</p> <span>00:10</span> </div> <div class="embed-responsive embed-responsive-16by9"> <video class="embed-responsive-item" allowfullscreen width="100%" id="video-inside" controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <button type="button" id="stop">&times;</button> </div> </div> </section>