jquery fullscreenchange и событие on.click

Question

У меня есть слайдер с адаптивным видео, которое может отображаться в полноэкранном режиме. При нажатии на изображение плаката в полноэкранном режиме я хочу получить .clientWidth изображения для установки div (.sp-layer), в который загружается iframe видео.

fullscreenchange События, кажется, работают нормально, но всякий раз, когда я нажимаю на ссылку с .on('click') Событие, fullScreenMode не определено?

    this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    console.log("initial fullScreenMode: " + this.fullScreenMode);

    $(document).on('mozfullscreenchange webkitfullscreenchange fullscreenchange', function() {
        console.log('fullscreenchange Event fired');
        this.fullScreenMode = !this.fullScreenMode; 
        console.log('fullScreenMode: ' + this.fullScreenMode);

        if (!this.fullScreenMode) {
            console.log('we are not in fullscreen, do stuff');
            $('.sp-layer').css('width', '100%');    
        }
    });

    $('a.sp-video').on('click', function() {
        console.log('clicked on link');
        console.log('fullScreenMode: ' + this.fullScreenMode);

        if (this.fullScreenMode) {
            console.log('we are fullscreen, do stuff');
            var cW = $(this).children('img')[0].clientWidth;
            console.log('clientWidth of image: ' + cW);
            $(this).parent('.sp-layer').css('width', cW);
        }
    }); 

Answer 1

+ Изменить this.fullScreenMode в document.fullScreenMode в вашем обработчике кликов. В обработчике кликов this относится к кнопке a.sp-video, а не документ.

Как в:

$('a.sp-video').on('click', function() {
    console.log('clicked on link');
    console.log('fullScreenMode: ' + document.fullScreenMode);

    if (document.fullScreenMode) {...