Play Youtube iframe full screen

Question

iframeに埋め込みのYoutube動画があるページがあります。 誰かがビデオを再生するたびにビデオをフルスクリーンに設定したいと思います。 私は多くのことを試しましたが、うまくいかないようです。

マイコード：

<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のAPIでこれを実現しようとしました。

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

誰でも？

Answer 1

私は、HTML5のためfullScreen APIをしようとするだろう：

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

プレイヤーイベントに耳を傾けるユーチューブインラインフレームAPIを使用し、それを設定： 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) 
       } 
      }