jquery - Modal Video Problems -
slight problem modal videos. have done 3 modal videos each seperate link. when click on bootstrap pill open area modals are, 3 videos start playing in background without opening modals?
i'm after video's playing when opened, , stopping , resetting when modal closed (the first part cant find answer whereas second part have seen answers make sense of first part im not sure ive gone wrong).
if has time me out i'd appreciate it
modal code
<div class="row"> <div id="vid1" class="col-xs-12 col-md-4"> <a href="#" class="launch-modal" data-modal-id="modal-video1"> <span class="video-link-text">example 1</span> </a> </div> <div id="vid2" class="col-xs-12 col-md-4"> <a href="#" class="launch-modal" data-modal-id="modal-video2"> <span class="video-link-text">example 2</span> </a> </div> <div id="vid3" class="col-xs-12 col-md-4"> <a href="#" class="launch-modal" data-modal-id="modal-video3"> <span class="video-link-text">example 3</span> </a> </div> </div> <!-- modal videos --> <div class="modal fade" id="modal-video1" 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 class="embed-responsive-item" src="../video/example1.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="modal-video2" 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 class="embed-responsive-item" src="../video/example2.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="modal-video3" 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 class="embed-responsive-item" src="../video/example3.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> </div> </div> </div> </div> </div> jquery (still noob apologise)
$('.launch-modal').on('click', function(e){ e.preventdefault(); $( '#' + $(this).data('modal-id') ).modal(); });
in code, put videos inside iframe tags. side effect of videos automatically played.
instead of using iframe tag, use video tag , have option turn off autoplay. example (autoplay off default)
<video width="320" height="240" controls> <source src="../video/example2.mp4" type="video/mp4"> browser not support video tag. </video> more information on video tag here
Comments
Post a Comment