CODEWITHSUNDEEP
javascriptiframeyoutube
D.R.
D.R.

Reputation: 21194

How to use YouTube IFRAME-Player in localhost html file?

I am writing an HTML-only app and want to embed a YouTube IFRAME-based player. I used the demo code from https://developers.google.com/youtube/iframe_api_reference unfortunately, this does not seem to work out-of-the-box for HTML files loaded via the file:// protocol. I get the following error:

www-widgetapi.js:100

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

I found Failed to execute 'postMessage' on 'DOMWindow': https://www.youtube.com !== http://localhost:9000 unfortunately it didn't help: whether I include it using their JS file via http or https doesn't matter.

Upvotes: 2

Views: 4244

Answers (2)

D.R.
D.R.

Reputation: 21194

If you do not use your own IFRAME but instead let the YouTube API create the IFRAME -> no problems whatsoever. Don't know why though, so if anyone is able to elaborate I'd be interested.

Edit, some sample code, although it's a few years old:

let player = new YT.Player('gv-player-iframe', {
          height: playerHeight,
          width: playerWidth,
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
          }
        });

Upvotes: 1

Techidiot
Techidiot

Reputation: 1947

The problem here is, you are running it through your file system. Instead try using local host.

For more information read this

Upvotes: 0

Related Questions