向视频元素添加/删除类

Question

I'm working on a kiosk-style web page to display a menu of options. Clicking on a title opens a fullscreen video which then closes back to the menu when the video ends.

To keep the page clean, I'd like to hide the video element until the video is actually called by a click. I did this with a CSS class. The video opens fullscreen and when finished, closes and adds the hide class again.

Working script

$(document).ready(function() {
  $('.cell').on('click', function() {
    var element = this.getElementsByTagName('video');
    var m = element[0].getAttribute('id');

    console.log(m);
    var v = document.getElementById(m);
    if (v.webkitRequestFullscreen) {
      v.className = "";
      v.webkitRequestFullscreen();
    }
    v.play();

    $("#" + m).on("ended", function() {
      this.webkitExitFullscreen();
      this.className = "hide";
    });
  })
})

I'm running into a problem of the video not hiding if the user exits full screen video on their own. I tried using $("#" + m).on("ended" || "resize", function()... based on the HTML5 video API, but that didn't work. I'd also considered disabling clicks or overlaying a full-screen div to grab any clicks and force the video to play all the way through, but that seems shady to me. Any ideas on how to approach this?

Here's a CodePen demo of the content and script

Answer 1

Space separated list:

$("#" + m).on("ended resize"

To make it work you might need this trick: How to detect DIV's dimension changed?

Update: I was able to catch the fullscreen event:

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e){
    console.log("fullscreen change");
});