3

I want to add a class (e.g. yt-fullscreen) to the <body> element when the player goes fullscreen.

Is there a way to get when the player goes in the fullscreen mode?

In the docs I didn't find any relevant event for that.

Maybe is there a way to check if the player is or not in the fullscreen state?

Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474

1 Answers1

2

Try like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yt fullscreen</title>
    <script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="//cdn.rawgit.com/vincepare/iframeTracker-jquery/master/jquery.iframetracker.js"></script>
</head>
<body>
<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen></iframe>
</div>
<script>
$(document).ready(function($){
    $('iframe').iframeTracker({
      blurCallback: function(){
        setTimeout(function(){
          if ($('iframe').width()<=560) {
            $('body').removeClass('yt-fullscreen');
          }else{
            $('body').addClass('yt-fullscreen');
          }
        }, 2000);
      }
    });
});
</script>
</body>
</html>

Player can't be checked because we get only iframe. So only thing that's left is to work with iframe.

Jakob
  • 3,493
  • 4
  • 26
  • 42
  • 1
    I can we can safely assume that if the `width === window.innerWidth && height === window.innerHeight`, then it's fullscreen. Thanks for the idea. – Ionică Bizău May 06 '16 at 06:19
  • This doesn't work if the user uses a keyboard shortcut to switch to fullscreen. – Taylan Sep 13 '17 at 08:15