Добавить/удалить класс в элемент видео

Question

Я работаю на веб-странице в стиле киоска, чтобы отобразить меню опций. При нажатии на заголовок открывается полноэкранное видео, которое затем закрывается в меню, когда видео заканчивается.

Чтобы сохранить страницу в чистоте, я хотел бы скрыть элемент video, пока видео не будет вызвано щелчком. Я сделал это с помощью класса CSS. Видео открывается в полноэкранном режиме и по завершении закрывается и снова добавляет класс hide.

Работа сценария

$(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"; 
    }); 
    }) 
}) 

Я бегу в проблему видео не скрывая, если пользователь выходит полноэкранное видео на своих собственных. Я попытался использовать $("#" + m).on("ended" || "resize", function()... на основе HTML5 видео API, но это не сработало. Я также рассмотрел возможность отключения кликов или наложения полноэкранного div, чтобы захватить любые клики и заставить видео играть до конца, но это кажется мне теневым. Любые идеи о том, как подойти к этому?

Here's a CodePen demo of the content and script

Answer 1

список разделенных пробелами:

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

Чтобы сделать его работу вам может понадобиться этот трюк: How to detect DIV's dimension changed?

Update: Я был в состоянии поймать полноэкранное событие:

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