Kaltura player keeps playing video when bootstrap modal is closed

1.7k Views Asked by At

I can't seem to get a Kaltura Player to stop playing the videos when I close a bootstrap modal. I have tried many different scripts that I've found online but none of them seem to work. Most of the scripts are for vimeo or youtube but I need to get one to work with Kaltura.

Any help is appreciated!! Here is my code:

Title

Paragraph

View Tutorial
    <!-- My Modal -->
    <div id="#myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

    <!-- My Modal Content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                    <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-sm-12">
                  <div class="embed-responsive embed-responsive-16by9">
                      <iframe id="kmsembed-0_rzj5pqht" width="auto" height="auto" src="#" class="embed-responsive-item kmsembed" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0"></iframe>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    <!-- /My Modal content -->
      </div>
    </div>
  <!-- /My Modal -->
2

There are 2 best solutions below

2
On

You need to trigger pause or stop on modal close.

Bootstrap 3

$('#myModal').on('hidden.bs.modal', function () {
    kdp.sendNotification("doPause");
})

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    kdp.sendNotification("doPause");
})

Or try this hard way if above don't work for you:

$('#myModal').on('hidden.bs.modal', function () {
    $('#kmsembed-0_rzj5pqht').attr('src', $('#kmsembed-0_rzj5pqht').attr('src'));
})
0
On

I know this question is a little old but searching for this answer I came across a solution and thought I would post it here in case anyone else runs into this issue. Based on the Kaltura site documentation found here you can stop the video by using destroy

Sample code:

$('#myModal').on( 'hide', function(){
    kWidget.destroy('kaltura_player');
});

Replace the 'kaltura_player' text with your embedded video ID. This worked for Kaltura videos embedded in an iframe.