Why does Youtube API show video unavailable when trying to load it onto my site?

问题

My site is using youtube api to load videos that users can then listen to. I haven't seen this appear before until now and I am wondering why this is.

My code is this

if (SettingsEnabled == 1) {
  $("#players").empty();
  var videoId = document.getElementsByClassName("songVideo")[0].id;
  player = new YT.Player("players", {
    height: "390",
    width: "640",
    playerVars: {
      origin: "https://www.musicrandomizer.com/Home",
    },

    videoId: videoId,
    widget_referrer: window.location.href,

    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange,
    },
  });

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

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      checkIfPaused();
      $("#VideoEnd").attr("value", 1);
      $("#players").empty();
      /*     startup();*/
    }
  }

  var Info = GetCookie("Settings");

  $.ajax({
    type: "POST",
    url: "../PHP/GetSongsSettings.php",
    dataType: "json",
    data: {
      Info: Info,
    },
    cache: false,
    success: function (data) {
      $("#players").css("left", "-50%");
      if (data == null) {
        var Info = $("#noSongsAvailable").text("No songs are available.");
        setTimeout(function () {
          var Info = $("#noSongsAvailable").text("");
        }, 5000);
      }
      $("#SongInfo").fadeIn();

      document.getElementById("Artist").innerHTML = "Artist: " + data["Artist"];
      document.getElementById("Album").innerHTML = "Album: " + data["Album"];

      window.top.$("#players").attr("src", "about:blank");
      setTimeout(function () {
        window.top
          .$("#players")
          .attr(
            "src",
            "https://www.youtube.com/embed/" +
              data["URL"] +
              "?enablejsapi=1&autoplay=1"
          );
      }, 2000);
      startup();
    },
  });
}

at the top of my JS file

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;

I was trying to read up online to see what the issue may be and some sources are saying its because of the embed settings on the youtube videos themselves, but I am unsure that this is the case, because there are some videos that I know have played before but are now showing the unavailable when loading it in. I also read online that it may have something to do with the origin of the youtube API playervars and I added that in and it is still having this issue. Is there something else that I am missing? Thanks!

来源：https://stackoverflow.com/questions/64018380/why-does-youtube-api-show-video-unavailable-when-trying-to-load-it-onto-my-site

标签

javascript

api

youtube-api