YouTube iFrame Player API failed to execute postMessage on DOMWindow

Question

I am trying to load youtube into my web page using YouTube iFrame Player API, and getting following error while loading:

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').

both origin and target are https, there are few SO post which resolves the issue by keeping origin & target url to https. In this case both are same.

Following is the JS code I am used to load the player dynamically:

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
            }
        });
    }

Answer 1

Try using loadVideoById

This function loads and plays the specified video.

• The required videoId parameter specifies the YouTube Video ID of the video to be played. In the YouTube Data API, a video resource's id property specifies the ID.
• The optional startSeconds parameter accepts a float/integer. If it is specified, then the video will start from the closest keyframe to the specified time.
• The optional endSeconds parameter accepts a float/integer. If it is specified, then the video will stop playing at the specified time.
• The optional suggestedQuality parameter specifies the suggested playback quality for the video. Please see the definition of the setPlaybackQuality function for more information about playback quality.

Here is a snippet to help you

JS

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>