Robert Decker free asked 2 years ago


Expected behavior video closes when modal closes

Actual behavior modal closes but video sound continues

*Resources (screenshots, code snippets etc.)*video modal - your samples


Alanc free answered 2 years ago


I happen to have a project where videos are inside modals, and enabled autoplay when the modal pops open, and video pausing when the user clicks outside of the modal or closes it. The video is also muted in my example by default as browsers such as Google Chrome tends to block media that isn't muted because it may annoy users.

        <div class="modal fade" id="modalBrecht" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content" style="background-color: transparent;">
    <div class="modal-header" style="background-color: white;">
        <h5 class="modal-title" id="exampleModalLabel"><strong>Brecht</strong> <i class="fas fa-chevron-right" style="padding-left: 1em;"></i> Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body" style="padding: 0;">
        <div class="row nm" style="width: 100%;">
            <video id="videoBrecht" class="video-fluid" loop muted playsinline poster="video_thumbnail/thumbnail.jpg" controls="true">
            <source src="videoname.mp4" controls="true" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="modal-footer icbg" style="border-top: none; padding: 0.4rem;">
    </div>
    </div>
</div>
</div>

With the following script:

<script>
//Play
$('#modalBrecht').on('shown.bs.modal', function () {
  $('#videoBrecht')[0].play();
  $("#videoBrecht").removeAttr("muted");
})
//Pause
  $('#modalBrecht').on('hidden.bs.modal', function () {
  $('#videoBrecht')[0].pause();
})
</script>

I hope this will help you.


Marta Wierzbicka staff commented 2 years ago

Hi,

thank you for your help.

Best, Marta



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.15
  • Device: Dell PC Deskgop
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No
Tags