I'm currently developing a website that incorporates the code showcased in this tutorial to launch a modal window featuring an iframe for playing YouTube or Vimeo videos.
The issue arises when, as mentioned in the comments on the tutorial page, there's no provision in the code to pause the video when the modal is closed either by using the close button or clicking outside the video area. Since I have limited experience with JavaScript, I've tried implementing all the suggestions from the comments without success. It seems like the recommendations assume a higher level of JS knowledge than what I possess. Hence, I would greatly appreciate it if someone could provide an explanation in simpler terms - almost like explaining to a five-year-old child.
Below is the JavaScript code snippet:
jQuery(document).ready(function() {
$('.launch-modal').on('click', function(e){
e.preventDefault();
$( '#' + $(this).data('modal-id') ).modal();
});
});
And here's the HTML markup for the modal:
<!-- MODAL-->
<div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-video">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/cp-Tt3aOYVY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<br><br>
<h4 class="section-heading">Lorem Ispum</h4>
<hr class="primary">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
</div>
</div>
</div>
</div>
Furthermore, here's the associated CSS code:
.modal-backdrop.in {
opacity: 100;
background: white;
}
.modal-content {
background: none;
border: 0;
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
color: black;
}
.modal-body {
padding: 0 25px 25px 25px;
}
.modal-header {
padding: 25px 25px 15px 25px;
text-align: right;
}
.modal-header, .modal-footer {
border: 0;
}
.modal-header .close {
float: none;
margin: 0;
font-size: 36px;
color: black;
font-weight: 300;
text-shadow: none;
opacity: 1;
}
.modal-dialog {
width: 80%;
margin: 0px auto;
color: black;
}
Your assistance on this matter would be immensely appreciated!