Login/Register
YouTube iFrame Player API failed to execute postMessage on DOMWindow
Asked Answered
Solved javascriptiframeyoutubeyoutube-apiyoutube-iframe-api
T

1

2

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

youtube iframe api video loading error view

Tetrahedron answered 5/8, 2016 at 11:56 Comment(1)
In my case it is because jQuery was load in the <head> section. Move it to <body> section at below but before <script src='https://www.youtube.com/iframe_api'></script> works fine. – Palatalized
S
0

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>
Sweeting answered 6/8, 2016 at 16:49 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.