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