Vimeo, Detect full screen click

Question

Is there a way to detect when a user push the full screen button? Can't find any info about it on their API site...

http://developer.vimeo.com/player/js-api

Answer 1

I try a lot of time to detect click on fullscreen button on vimeo player, with no success. But i find other solution that work for me:

$(window).resize(checkResize);

function checkResize(){
    if (
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
    ){
        // action for fullscreen enable
    }else{
        // action for fullscreen disable
    }
}

Answer 2

This is how I accomplished detecting if embedded (iframe) Vimeo videos were fullscreen or not (requires jQuery):

$(function(){
    var checkVimeoFullscreen = setInterval(function(){
        var winWidth = $(window).width(); // Get the full window width
        var vimeoWidth = $('iframe[src*="vimeo"]').width(); // Get the width of the Vimeo iframe
        if (winWidth == vimeoWidth){ // if the Vimeo iframe and the window width match, you're in fullscreen
            console.log("Vimeo is in fullscreen mode.");
        } else {
            console.log("Vimeo is not in fullscreen mode.");
        }
    },500); // You can change the interval if you want, but this worked for me
});

Answer 3

Check this bellow, listen to screen resize, then check if document is at fullscreen mode or not, if on fullscreen mode do whatever you want (for example rotate screen to landscape)

                        window.addEventListener('resize', function () {
                    if (
                        document.fullscreenElement ||
                        document.webkitFullscreenElement ||
                        document.mozFullScreenElement ||
                        document.msFullscreenElement
                    ){
                        screen.orientation.lock('landscape');
                    }
                });

Answer 4

You can do it like this:

$('button.fullscreen[data-title-fullscreen][data-title-unfullscreen]').click(function(){
//DO something here
});