IIFE의 Javascript 함수가 비디오 플레이어에서 작동하지 않습니다.

Question

비디오 플레이어를 만든 코드가 있습니다. IIFE에서 스크립트를 래핑 할 때 비디오 플레이어 부분은 작동하지 않지만 나머지 코드는 작동합니다. 콘돔에 오류가 없습니다.

바이올린 " https://jsfiddle.net/wdbnmhrm/

JS

(function() { 

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; 
    var video_div = document.getElementsByClassName("easy-yt-bkg")[0]; 
    var video_url = video_div.getAttribute("data-youtube-id"); 

    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('easy-youtube_background', { 
     height: '100%', 
     width: '100%', 
     playerVars: { 
       autoplay: 1, 
       loop: 1, 
       controls: 0, 
       showinfo: 0, 
       autohide: 1, 
       modestbranding: 1, 
       vq: 'hd1080'}, 
     videoId: video_url, 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

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

    function onPlayerStateChange(event) { 
    if (event.data === YT.PlayerState.ENDED) { 
     player.playVideo(); 
    } 
    } 

    var height_adjustment = video_div.offsetHeight 
    video_div.posiiton = "relative"; 
    video_div.zIndex = -10; 
    var content_div = document.getElementsByClassName("content")[0] 
    content_div.zIndex = 1; 
    content_div.position = "relative"; 
    var height_change = "-" + height_adjustment + "px" 
    console.log(height_change); 
    content_div.style.top = height_change; 
})(); 

HTML

<div id="easy-youtube_background" class="easy-yt-bkg" data-youtube-id="ZZ9_RJ2EPo0"></div> 
<div class="content">Some cool content goes here</div> 

CSS

#easy-youtube_background { 
    height: 400px; 
    width: 600px; 
    } 

    .content { 
    color: red; 
    position: relative; 
    } 

Answer 1

문제는 당신이 있다는 것입니다 onYouTubeIframeAPIReady() 함수로 전화하지 마십시오.

이 항목을 좀 더 읽기 쉽도록 정리하고이 문제를 재현 할 필요가없는 내용을 제거했습니다.

(function() { 
    var player; 
    var video_div = document.getElementsByClassName("easy-yt-bkg")[0]; 
    var video_url = video_div.getAttribute("data-youtube-id"); 

    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('easy-youtube_background', { 
     height: '100%', 
     width: '100%', 
     playerVars: { 
      autoplay: 1, 
      loop: 1, 
      controls: 0, 
      showinfo: 0, 
      autohide: 1, 
      modestbranding: 1, 
      vq: 'hd1080'}, 
     videoId: video_url, 
     events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
     } 
     }); 
    } 

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

    function onPlayerStateChange(event) { 
     if (event.data === YT.PlayerState.ENDED) { 
     player.playVideo(); 
     } 
    } 

    var ytScript = document.createElement('script'); 
    ytScript.src = "https://www.youtube.com/iframe_api"; 
    ytScript.onload = function() { 
     YT.ready(onYouTubeIframeAPIReady); 
    }; 
    var scriptContainer = document.getElementsByTagName('body')[0]; 
    scriptContainer.appendChild(ytScript); 
}());