Play Youtube iframe полный экран

Question

У меня есть страница со встроенным видео Youtube в iframe. Я хочу установить видео в полноэкранный режим, когда кто-то воспроизводит видео. Я пробовал много вещей, но не могу заставить его работать.

Мой код:

<div class="video-wrapper"> 
    <div class="video"> 
     <iframe id="home-video" allowfullscreen="allowfullscreen"  mozallowfullscreen="mozallowfullscreen" 
             msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" 
             webkitallowfullscreen="webkitallowfullscreen" frameborder="0" 
             src="https://www.youtube.com/watch_popup?v=dQw4w9WgXcQ"> 
     </iframe> 
    </div> 
</div> 

Я также пытался сделать это с Youtube Апи, но без успеха.

<script src="https://www.youtube.com/iframe_api"></script> 

Кто-нибудь?

Answer 1

Я бы попробовать fullScreen API для HTML5:

function fullScreen() { 

    var e = document.getElementById("video-wrapper"); 
    if (e.requestFullscreen) { 
     e.requestFullscreen(); 
    } else if (e.webkitRequestFullscreen) { 
     e.webkitRequestFullscreen(); 
    } else if (e.mozRequestFullScreen) { 
     e.mozRequestFullScreen(); 
    } else if (e.msRequestFullscreen) { 
     e.msRequestFullscreen(); 
    } 
} 

function YTStateChange(event) { 
    switch(event.data) { 
     case -1: 
      fullScreen(); 
     break; 
     case 1: 
      // some code 
     break; 
     case 2: 
      // some code 
     break; 
     default: 
     break; 
    } 
} 

$(document).ready(function() { 
    var player = new YT.Player('video-wrapper', { 
     events: { 'onStateChange': YTStateChange } 
    }); 
}); 

Answer 2

Используйте юность Iframe Апи и установить его, чтобы слушать игрок событий: https://developers.google.com/youtube/iframe_api_reference

После того, как вы получите событие игры вызвать ваше полноэкранное функцию

  function launchIntoFullscreen(element) { 
       if(element.requestFullscreen) { 
       element.requestFullscreen(); 
       } else if(element.mozRequestFullScreen) { 
       element.mozRequestFullScreen(); 
       } else if(element.webkitRequestFullscreen) { 
       element.webkitRequestFullscreen(); 
       } else if(element.msRequestFullscreen) { 
       element.msRequestFullscreen(); 
       } 
      } 

      function onPlayerStateChange(event) { 
       if (event.data == YT.PlayerState.PLAYING) { 
       launchIntoFullscreen(YOURIFRAME) 
       } 
      }