Play 유튜브 iframe 전체 화면

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> 

나는 또한 유튜브 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

을 유튜브 iframe이 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) 
       } 
      }