youtube - YouTube在纵向 View 下自动退出全屏显示，但在横向 View 下可以正常显示

Question

每当我以全屏模式在移动设备上单击全屏观看youtube嵌入式视频时，它就会切换为横向全屏模式，并返回到原始位置。

我已经使用iframe API实现了它。 (这里的内容将动态加载)

<div class="card-media-wrap">
   <div style="position: absolute; top: 0px; background-image: url(&quot;http://localhost/hellou_clone/thehooknew/wp-content/uploads/2017/05/islafisher-baroncohen.jpg&quot;);"></div>
<a tabindex="0">
   <img src="loading_ring.svg" width="100%" id="load-hilary-122014" class="loading_ring" style="display: none;">
   <span class="play_button_span" id="play_button-hilary-122014" style="display: block;"></span> 8
</a>
<iframe id="hilary-122014" src="https://www.youtube.com/embed/9IL9Omfh0hU?&amp;rel=0&amp;enablejsapi=1" style="background-size: cover;margin: 0; opacity: 0;" frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
</div>

Answer 1

从codepen尝试此代码。全屏以纵向模式工作，不会自动退出。

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}