jquery - 如何在使用JQuery集成Youtube API时修复 'Uncaught Error: YouTube player element ID required.'错误？

Question

我正在尝试从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

我尝试使用var newPlayer = new YT.get('id-of-the-element');将ID获取给播放器，但是没有用。

这是我的代码。

HTML代码

<div class="YTwrapper embed-responsive embed-responsive-16by9" data-video="UeYWFli9csw">
  <div id="YTplayer-About" class="YTplayer"></div>
  <div class="video-overlay fade show overlay overlay-black-gradient" style="background-image:url('https://www.torontopenthouseliving.com/wp-content/uploads/2019/08/28152-111079.jpeg')">
  <h1>Youtube Video</h1>
  </div>
</div>

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视频。在此先感谢您为我提供帮助。

Answer 1

删除.find()方法:

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

变量$wrapper已经定义为您要查找的元素。

https://jsfiddle.net/g72yn64u/