Okay so basically I have a modal that is within a while loop that is pulling in post data for a video link. The issue is that it only works for the first video and I understand that it’s because that is what loads first. I want to know how I can get it to work for all videos in the loop. Maybe using some type of data-src attribute? not sure.. any help would be great.
JavaScript
x
if ($the_query->have_posts()) {
while ($the_query->have_posts()) : $the_query->the_post();
$postid = get_the_ID();
?>
<div id="myBtn" class="week-episode-watch-now myBtn">Coming Soon!!</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<video id="commingSoonVid" controls="" preload="metadata" poster="" autoplay="" style="visibility: visible;">
<source src="<?php echo get_post_meta($postid, 'video_file', true); ?>" type="video/mp4">
</video>
</div>
</div>
<?php endwhile;
}
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var elements = document.getElementsByClassName('myBtn');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
// When the user clicks the button, open the modal
for (var i = 0, length = elements.length; i < length; i++) {
elements[i].onclick = function(event) {
modal.style.display = 'block';
};
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = 'none';
$('video').trigger('pause');
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
$('video').trigger('pause');
}
}
</script>
EDIT: I have made some changes and updates.. My question is slightly different now. Basically all i need to know now is how do I close the modal when user clicks outside of my modal?
JavaScript
<div id="myBtn" class="week-episode-watch-now myBtn" data-toggle="modal" data-target="#videoModal" data-theVideo="<?php echo get_post_meta($postid, 'video_file', true); ?>">Coming Soon</div>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<video class="size" id="commingSoonVid" controls="" preload="metadata" poster="" autoplay="" style="visibility: visible;">
<source src="" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<script>
modalFunction();
function modalFunction() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' video').attr('src', videoSRCauto);
$(theModal).show();
$(theModal + ' button.close').click(function () {
$(theModal + ' video').attr('src', videoSRC);
$(theModal).hide();
$('video').trigger('pause');
});
});
}
</script>
Advertisement
Answer
Hello everyone I figured out my own issue. If you are interested here is the final script i ended up going with here took em HOURS to figure out….
JavaScript
modalFunction();
function modalFunction() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' video').attr('src', videoSRCauto);
$(theModal).show();
$(theModal + ' button.close').click(function () {
$(theModal + ' video').attr('src', videoSRC);
$(theModal).hide();
$('video').trigger('pause');
});
});
}
const modalOuter = document.querySelector('.modal')
modalOuter.addEventListener('click', function(event){
const isOutside = !event.target.closest('.size')
if (isOutside){
$('.modal').hide();
$('video').trigger('pause');
}
})