CODEWITHSUNDEEP
javascriptjqueryruby-on-railsyoutube-apibootstrap-modal
Int'l Man Of Coding Mystery
Int'l Man Of Coding Mystery

Reputation: 1722

stop/pause video when modal closes/hides

I know this has been asked and answered, but I'm not having any luck with any of the options that I've found. I'm trying to have the video stop playback or pause the video when the modal closes. One problem I'm having is the ability to target the close button. I've put console.logs in the functions I've tried and they weren't registering in the console at all. Thanks for any insights able to be offered. 

<div id="myModal<%= index + 1 %>"  data-id='<%= list.video_id %>'class="modal fade videoModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content bmd-modalContent" >
            <div class="modal-body modal-header">
              <div class="close-button">
                <button id='single' type="button" class="close fancybox-close" data-dismiss="modal" aria-label='Close' ><span aria-hidden="true">&times;</span></button>
              </div>
              <div class='embed-responsive embed-responsive-16by9'>
                <iframe id='player' class='embed-responsive-item' src="https://youtube.com/embed/<%= list.video_id %>?rel=0&enablejsapi=1" allowFullScreen='true' frameborder="0"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>

EDIT: Sorry, I'had tried so much jQuery that I didn't have any in my app.js folder at the time. Here is what I'm working with now.

$('[id^=myModal]').on('hidden.bs.modal', function(event) {
  console.log(player);
  event.target.stopVideo();
});

Upvotes: 0

Views: 2699

Answers (2)

Kazi Hasan Ali
Kazi Hasan Ali

Reputation: 306

Well, you can simply remove the src of the iframe and then put back again like; so the iframe stops running. 

 <iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf  ?>" w></iframe>
 <span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton"  data-dismiss="modal"></span>

now the Jquery part 

function stopVideo(id){
  var src = $j('iframe.'+id).attr('src');
  $j('iframe.'+id).attr('src','');
  $j('iframe.'+id).attr('src',src);

}

Upvotes: 1

sonic
sonic

Reputation: 1430

Update the question with more details

Its really hard to tell what is the problem because you only posted html. You having problem with locating close button and your console.log doesnt trigger. Obviously your javascripe file has some errors above your console.log line.

To detect if modal is closed you can use this EVENT

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

I would not change id of modals when generating them, instead I would put data-attr on this element to have one .on('hidden.bs.modal') and to have control over every modal

UPDATE:

from youtube-api docs https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

It has been said that if you embed in your html iframe with the youtube video then in the moment u make something like this in js:

function onYouTubeIframeAPIReady(){
    var iframe = document.getElementById("my-video");
    video = new YT.Player(iframe);
}

you dont have to define attributes of Player that you create, it will take it from the iframe.

fiddle: http://jsfiddle.net/ux86c7t3/2/

Upvotes: 2

Related Questions