YouTube iFrame Player API 无法在 DOMWindow 上执行 postMessage答案

【问题标题】：YouTube iFrame Player API failed to execute postMessage on DOMWindowYouTube iFrame Player API 无法在 DOMWindow 上执行 postMessage
【发布时间】：2016-12-11 20:03:45
【问题描述】：

我正在尝试使用 YouTube iFrame Player API 将 youtube 加载到我的网页中，并且在加载时出现以下错误：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://developer-sandbox.com').

来源和目标都是https，很少有SO帖子通过将来源和目标网址保留为https来解决问题。在这种情况下，两者是相同的。

下面是我用来动态加载播放器的JS代码：

showVideoPreview: function(youtube_id){
        var meThis = this;
        var player = new YT.Player('shoppable-video-container', {
            height  : '315',
            width   : '560',
            videoId : youtube_id,
            events  : {
                'onReady'       : meThis.onPlayerReady,
                'onStateChange' : meThis.onPlayerStateChange
            }
        });
    }

【问题讨论】：

在我的情况下，这是因为 jQuery 在 <head> 部分加载。将其移至下面的 <body> 部分，但在 <script src='https://www.youtube.com/iframe_api'></script> 工作正常之前。

标签： javascript iframe youtube youtube-api youtube-iframe-api

【解决方案1】：

尝试使用loadVideoById

此函数加载并播放指定的视频。

必需的 videoId 参数指定要播放的视频的 YouTube 视频 ID。在 YouTube 数据 API 中，video 资源的 id 属性指定 ID。

可选的 startSeconds 参数接受浮点数/整数。如果指定，则视频将从距指定时间最近的关键帧开始。

可选的 endSeconds 参数接受浮点数/整数。如果指定，则视频将在指定时间停止播放。

可选的 suggestedQuality 参数指定建议的视频播放质量。有关播放质量的更多信息，请参阅setPlaybackQuality 函数的定义。

这里有一个sn-p来帮助你

function searchVideo(){
var vID = document.getElementById("vidID").value
player.loadVideoById(vID, 0, "default");

}

HTML

Search by Video ID: <input type="text" id="vidID" name="vidID"><button onclick="searchVideo()">Search</button>

【讨论】：