2016-05-06 2 views
3

Я хочу добавить класс (например, yt-fullscreen) в элемент <body>, когда плеер входит в полноэкранный режим.Событие Fullscreen на YouTube Player API

Есть ли способ получить , когда плеер входит в полноэкранный режим?

В документах я не нашел для этого релевантного события.

Возможно, есть ли способ проверить, находится ли игрок в полноэкранном режиме?

+0

См. Также https://stackoverflow.com/q/24389115/32453 – rogerdpack

+0

@rogerdpack Конечно, но я не уверен, что iframe является полноэкранным. –

ответ

2

Попробуйте так:

<!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> 

Игрок не может быть проверено, потому что мы получаем только IFRAME. Остается только то, что нужно работать с iframe.

+1

Я могу с уверенностью предположить, что если 'width === window.innerWidth && height === window.innerHeight', то это полноэкранный режим. Спасибо за идею. –

+0

очень хорошее решение +1 –

+0

Это не работает, если пользователь использует комбинацию клавиш для переключения на полноэкранный режим. – Taylan

Смежные вопросы