Youtubeはポートレート表示ではフルスクリーンで自動的に終了しますが、横長表示ではうまく動作します

Question

携帯で縦型モードの埋め込みビデオをフルスクリーンでクリックするたびに、横長フルスクリーンモードに戻り、元の位置に戻ります。

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)(); 
    } 
}