播放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全屏

回答

相关问题