如何修复'；未捕获错误：需要YouTube播放器元素ID；使用JQuery集成Youtube API时出错？

我试图从YouTube API加载视频，出现以下错误

Uncaught Error: YouTube player element ID required.
    at new Y (www-widgetapi.js:161)
    at HTMLDivElement.<anonymous> (youtube.js?ver=1.3:37)
    at Function.each (jquery.js?ver=1.12.4-wp:1)
    at a.fn.init.each (jquery.js?ver=1.12.4-wp:1)
    at window.onYouTubePlayerAPIReady (youtube.js?ver=1.3:31)
    at www-widgetapi.js:185
    at www-widgetapi.js:185

JS代码

// Youtube API Call
var players = {};

jQuery(document).ready(function($) {

  var $wrapper = jQuery('.YTplayer');
  var tag = document.createElement('script');
  var playerControls = {
    'enablejsapi' : 1,
    'origin': window.location.origin,
    'controls': 1,
    'modestbranding' : 0,
    'showinfo' : 0,
    'rel' : 0,
    'autoplay' : 0,
    'loop' : 0
  };


  if ($wrapper.length === 0) {
    return;
  }

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



  window.onYouTubePlayerAPIReady = function() {
    $wrapper.each(function() {
      $el = $(this);
      var playerID = $el.find('.YTplayer').attr('ID');
      var vidData = $el.data();
      var overlay = $el.find('.video-overlay');
      console.log(playerID);
      var newPlayer = new YT.Player(playerID, {
        videoId : vidData.video,
        playerVars: playerControls
      });

      players[playerID] = newPlayer;

      overlay.on("click",function(event){
        toggleOverlay(event.currentTarget,'start');
      });
    });
  };


  function toggleOverlay(target, action) {
    console.log('toggleoverlay');
    var $target = $( target );
    var playID = $target.parent(".YTwrapper").find(".YTplayer").attr("id");
    var $targetPlayer = players[playID];

    if (action == 'start') {
      $target.toggleClass('show');
      setTimeout(
        function()
        {
          $target.toggleClass('z-hide');
        }, 150);
      $targetPlayer.playVideo();
    } else {
      $target.toggleClass('z-hide');
      setTimeout(
        function()
        {
          $target.toggleClass('show');
        }, 150);
    }
  }
});

预期的输出是，当有人点击覆盖部分时，它应该开始播放youtube视频。提前感谢您在这方面的帮助。

放弃.find（）方法：

变量

$wrapper

已定义为您要查找的元素

删除.find（）方法：

变量

$wrapper

已定义为您要查找的元素

// Youtube API Call
var players = {};

jQuery(document).ready(function($) {

  var $wrapper = jQuery('.YTplayer');
  var tag = document.createElement('script');
  var playerControls = {
    'enablejsapi' : 1,
    'origin': window.location.origin,
    'controls': 1,
    'modestbranding' : 0,
    'showinfo' : 0,
    'rel' : 0,
    'autoplay' : 0,
    'loop' : 0
  };


  if ($wrapper.length === 0) {
    return;
  }

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



  window.onYouTubePlayerAPIReady = function() {
    $wrapper.each(function() {
      $el = $(this);
      var playerID = $el.find('.YTplayer').attr('ID');
      var vidData = $el.data();
      var overlay = $el.find('.video-overlay');
      console.log(playerID);
      var newPlayer = new YT.Player(playerID, {
        videoId : vidData.video,
        playerVars: playerControls
      });

      players[playerID] = newPlayer;

      overlay.on("click",function(event){
        toggleOverlay(event.currentTarget,'start');
      });
    });
  };


  function toggleOverlay(target, action) {
    console.log('toggleoverlay');
    var $target = $( target );
    var playID = $target.parent(".YTwrapper").find(".YTplayer").attr("id");
    var $targetPlayer = players[playID];

    if (action == 'start') {
      $target.toggleClass('show');
      setTimeout(
        function()
        {
          $target.toggleClass('z-hide');
        }, 150);
      $targetPlayer.playVideo();
    } else {
      $target.toggleClass('z-hide');
      setTimeout(
        function()
        {
          $target.toggleClass('show');
        }, 150);
    }
  }
});

var playerID = $el.attr('ID');