0

I'm using a bootstrap modal popup to display a html5 video element inside it. Like following picture.

The HTML 5 Video inside bootstrap modal popup

When the user enables the full-screen mode of video it works perfectly fine as the following photo.

The HTML 5 Video on full-screen mode

However, when an escape button is pressed while video is being played on full-screen mode, it not just gets out of full-screen mode but the popup too. I don't want popup to disappear instead the video must be restored along with the opened popup. Also popup should act normally on escape for other modes.

Note: I think when user presses esc button a listener on popup listens it and act accordingly. In my opinion, how to halt that behavior while video is on full-screen mode, is what which can help here. On the other hand if there's no keyboard interaction everything works smoothly.

Thanks in advance.

Mukesh Kumar
  • 656
  • 5
  • 26

1 Answers1

0

You can disable esc functionality for bootstrap popups by 2 ways

  1. Removing tabindex="-1"

    <div id="myModal" class="modal hide fade" tabindex="-1" ...>

</div>

  2. Setting keyboard property to false

    $(function () {
    $('.modal').modal({
        show: true,
        keyboard: false,
        backdrop: 'static'
    });
});

Hope it helps.

khushboo29
  • 906
  • 6
  • 16
  • Thanks for the response, but it doesn't seem to address the exact problem. Because by disabling escape it will remove the escape functionality on modal for all the mode. But I just need to put it on halt for full-screen mode. I hope it clears the air a bit. – Mukesh Kumar May 03 '16 at 06:30
  • esc event here triggers for popup. I think in your case you have to explicitly disable it for popups and enable for video detecting keypress - if (e.keyCode == 27) – khushboo29 May 03 '16 at 06:39
  • Indeed, I guess you got it. But now the concern is how to do that along with where to do that! – Mukesh Kumar May 03 '16 at 06:42
  • This can be hurdle..I am not sure if it is possible. Found similar question..but still un-answered - http://stackoverflow.com/questions/11744017/esc-from-fullscreen-using-video-in-full-screen-minimizes-whole-app-in-flex – khushboo29 May 03 '16 at 06:50
  • I think it can be done because as per the question you referred the asker wants to disable escape feature for video which isn't my case. I'm trying to play with bootstrap modal which has nothing to do with full-screen video if it accepts esc or not. But it must halt escape while my video is on full screen mode for Model not for the video. – Mukesh Kumar May 03 '16 at 06:54