I am trying to play video in Modal Pop up, it works fine in Chrome but not in Firefox.

Below is the Code:

<a href="#video" data-toggle="modal" id="clickForVideo">
  Click Me
</a>

==========

Modal poop up code:

==========

<div class="modal fade" id="video" role="dialog" style="display:none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body modal-video">
        <iframe width="560" height="315" ></iframe>
      </div>
      <button type="button" class="btn modal-close" data-dismiss="modal">X</button>
    </div>
  </div>
</div>

==========

JS code:

==========

$(document).on("click", '#clickForVideo', function() {
  var src = '//www.youtube/embed/itTskyFLSS8?feature=player_embedded&autoplay=1';
  $('#video').modal('show');
  $('#video iframe').attr('src', src);
  $(".modal-video").fitVids();
});

==========

I am trying to play video in Modal Pop up, it works fine in Chrome but not in Firefox.

Below is the Code:

<a href="#video" data-toggle="modal" id="clickForVideo">
  Click Me
</a>

==========

Modal poop up code:

==========

<div class="modal fade" id="video" role="dialog" style="display:none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body modal-video">
        <iframe width="560" height="315" ></iframe>
      </div>
      <button type="button" class="btn modal-close" data-dismiss="modal">X</button>
    </div>
  </div>
</div>

==========

JS code:

==========

$(document).on("click", '#clickForVideo', function() {
  var src = '//www.youtube./embed/itTskyFLSS8?feature=player_embedded&autoplay=1';
  $('#video').modal('show');
  $('#video iframe').attr('src', src);
  $(".modal-video").fitVids();
});

==========

• javascript
• jquery
• html
• css
• twitter-bootstrap

• works for me, what version of FF are you using? jsfiddle/GxmLg – C. S. Commented Dec 27, 2013 at 9:40
• I am using Firefox 26.0 and OS: Ubuntu – Ankush Kataria Commented Dec 27, 2013 at 11:51
• Write something in console and check by click, the function call inside or not. – Bharat soni Commented Dec 27, 2013 at 14:01
• have tried it from console as well and function calls. One thing I notice that Video is not working, Audio is working fine. – Ankush Kataria Commented Dec 30, 2013 at 6:40

3 Answers 3

Adding this css code block in the page you have that modal will sort this issue.

.modal.fade .modal-dialog{transform:none !important;}

I have encountered the same issue, and managed to fix it by setting wmode = transparent .

See this answer for more.

Video not working in Modal popup due to Firefox plugin Shockwave Flash.

When I inactive the plugin everything works fine.

Below are the links for more description to the answer:

https://support.mozilla/en-US/kb/fix-mon-audio-and-video-issues

https://support.mozilla/en-US/kb/troubleshoot-issues-with-plugins-fix-problems