[youtube] iframe-api

유투브 동영상이 모바일 앱에서 문제가 되는 경우가 있다.

공유하기(share) 와 나중에보기(whatch-later)

해결방안 1

하나의 공유 주소를 사용하는 경우 https://www.youtube.com 주소를 youtube-nocookie 로 변경하는 방법

<iframe width="854" height="480" src="https://www.youtube-nocookie.com/embed/cPVgwz5aN1o" frameBorder="0" allowFullScreen />

해결방안 2

Iframe Player API 바로가기

https://www.youtube.com/iframe_api
api 를 사용하는 경우
Player 함수의 'play' 셋팅에서 'host'를 변경하는 방법

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        wmode: 'transparent',
        host: 'https://www.youtube-nocookie.com', // 기본적으로는 값을 넣지 않는다.
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.setPlaybackRate(2);
    event.target.playVideo();
}

해결방안 3

iframe embed 를 제어 하기 위해 css 를 이용 제어를 하고
오토플레이를 이용 제어 버튼을 만든다.

<div className="video-container">
  <div className="video-foreground">
    <div className="btn-stop-play">play</div>
    <iframe width="854" height="480" src="https://www.youtube.com/embed/cPVgwz5aN1o?autoplay=1" frameBorder="0" allowFullScreen />
  </div>
</div>

.video-container{
  position: absolute;
}
.video-container iframe {
  pointer-events: none;
}
.video-foreground{
  pointer-events:none;
}