播放YouTube的iframe全屏

我已經有一個嵌入的Youtube視頻在iframe中的頁面。我想在有人播放視頻時將視頻設置爲全屏。我已經嘗試了很多東西，但似乎無法得到它的工作。播放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 API將做到這一點，但沒有成功。

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

有人嗎？

來源

2016-09-21 Mr. Sam

我會嘗試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 } 
    }); 
});

來源

2016-09-21 14:28:13

Thx爲迴應！我想在有人開始播放視頻時將視頻設置爲全屏。這種方法只會在單擊「其他」按鈕時設置視頻全屏，對嗎？這不是我正在尋找的方法。 –

確定 - 將編輯此 –

event.data -1表示「未開始」，而不是全屏。查看YT.PlayerState中所有可能的選項。沒有「全屏」狀態 –

使用YouTube的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) 
       } 
      }

來源

2016-09-21 14:41:11 StackOverMySoul

播放YouTube的iframe全屏

回答

相關問題