유튜브 임베드 오류 failed to execute 'postmessage' on 'domwindow': the target origin provided ('<url>') does not match the recipient window's origin ('<url>').

failed to execute 'postmessage' on 'domwindow': the target origin provided ('<url>') does not match the recipient window's origin ('<url>').

 

슬라이드에 유튜브 영상들을 임베드하는 작업을 하고 있었다.

이때 슬라이드가 돌아가면 재생중이던 유튭 영상이 일시정지 되어야 했다.

 

구글링을 해보니, postMessage로 유튭 영상을 제어할 수 있었다.

 

슬라이드 오른쪽 왼쪽 버튼을 클릭할때마다 (혹은 슬릭과 같은 라이브러리 사용시에는 afterChange 이벤트 후에) 아래의 코드를 넣었다.

 

const player = document.querySelectorAll('.video_player');

for (let idx in player) {
    player[idx].contentWindow.postMessage('{
        "event": "command", 
        "func":"pauseVideo",
        "args":""
    }', '*')
}

 

func 부분에 이벤트를 넣어 원하는 대로 영상 콘트롤이 가능하다.

(참고: https://developers.google.com/youtube/iframe_api_reference?hl=ko) 

 

그랬더니 갑자기 오류가 쏟아지기 시작...

 

 

postMessage 를 이용해 다른 윈도우로 데이터를 보낼 때, 항상 정확한 타겟 origin (*가 아니라) 을 지정하세요. 악의적인 사이트는 당신이 모르는 사이에 윈도우의 위치를 변경할 수 있고, 따라서 postMessage를 사용하여 전송된 데이터를 가로챌 수 있습니다.

 

라고 함. 어쩐지 보안상의 문제로 타겟 origin을 정확하게 입력하지 않으면 이벤트가 실행되지 않도록 막은 것 같다..

 

const player = document.querySelectorAll('.video_player');

for (let idx in player) {
    if (player[idx].contentWindow && player[idx].contentWindow.postMessage) {
        player[idx].contentWindow.postMessage('{
            "event": "command", 
            "func":"pauseVideo",
            "args":""
        }', 'https://www.youtube.com/')
    }
}

 

라고 수정했지만 화면이 로드되는 순간부터 오류가 차곡차곡 쌓이는 기이한? 광경을 목격했다..

그래서 postMessage의 방식을 포기하고 youtube iframe api를 이용해 작성하기로 함

 

 

<div id="video1" class="video_player"></div>
<div id="video2" class="video_player"></div>
<div id="video3" class="video_player"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
	const videoArr = [{
        id: 'video1',
        videoId: 'p5GAJOSEGPQ',
        start: 383
    }, {
        id: 'influencerVideo2',
        videoId: 'Q5bUzKUYt44',
        start: 371
    }, {
        id: 'influencerVideo3',
        videoId: '9FkdcAajL44',
        start: 84
    }]
    
    function onYouTubeIframeAPIReady() {
        const videos = document.querySelectorAll('.video_player');
        for (let i = 0; i < videos.length; i++) {
            
            let vObj = new YT.Player(videoArr[i].id, {
                videoId: videoArr[i].videoId,
                playerVars: {'start': videoArr[i].start},
                events: {
                    'onReady': onPlayerReady
                }
            })
            videoArr[i].obj = vObj;
        }
    }
    
    function onPlayerReady() {
        // video ready
    }    
</script>

 

 

대충 이런식으로 넣고 돌리니 오류는 뜨지만 무한 오류는 아니고..

 

 

요정도로만 뜬다. 기능은 잘 작동하고 크리티컬한 문제는 보이지 않아 이쯤에서 작업을 마무리했다.

결국 이 오류 자체를 해결하진 못했다. 대체 이 오류는 왜 뜨는걸까.. 더 연구가 필요할듯 보인다.