Question

因此，我使用了YouTube API中的代码在网页的部分上渲染背景视频。我仅使用 Ipad 型号A1490版本 ios 遇到问题，即9.3.2（13F69）Chrome 63.03239.73或Safari（和iPhone 6）：Blocked a frame with origin “https://www.youtube.com” from accessing a frame with origin "https://mydomain-without-leading-www.com". Protocols, domains, and ports must match.

结果是，我可以看到背景视频为带有加载指示器的黑色矩形： image with black loading indicator

但是在其他设备上-台式机或Android手机/平板电脑-都可以正常工作。我如何使用youtube api：

if ($('.videoplayer-container').length > 0) {
  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 playersArray = [];
  window.onYouTubeIframeAPIReady = function () {
    var playerDefaults = {
      autoplay: 1,
      autohide: 1,
      modestbranding: 1,
      rel: 0,
      showinfo: 0,
      controls: 0,
      disablekb: 1,
      enablejsapi: 0,
      iv_load_policy: 3
    };

    $('.videoplayer-container').each(function(key, value){
      var playerId = 'videoplayer-container-' + $(value).attr('data-section');
      var divObj = value;
      var playerObj = new YT.Player( playerId,
        { videoId: $(value).attr('data-youtube-id'),
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onStateChange
          },
          playerVars: playerDefaults
        });
      playersArray.push({ playerId, playerObj, divObj });
    });

    function onPlayerReady(obj){
      if (obj.target.mute) {
        obj.target.mute();
      }
      playersArray.forEach(function(obj){
        const playerObject = obj.playerObj;
        if (playerObject.playVideo) {
          playerObject.playVideo();
          if (playerObject.isMuted && !playerObject.isMuted()) {
            playerObject.mute();
          }
        }
        rescaleVideo(obj);
      });
    }

    function onStateChange(obj){
      if (obj.data === YT.PlayerState.ENDED) {
        obj.target.playVideo();
      }
    }

    //  ....
  };
}

我尝试使用origin参数并传递不同的值：'https://www.youtube.com'-不输出控制台错误，但未创建iframe，location.protocol + '//' + location.host-错误仍然存在。我用谷歌搜索了这个问题，但没有找到解决方法。

仅在Ipad iOS上阻止了来源为“ https://www.youtube.com”的框架

0 个答案: