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

Question

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.

D.R. · Accepted Answer · 2022-06-27 12:52:46Z

1

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

edited Jun 27, 2022 at 12:52

answered Oct 1, 2016 at 22:05

D.R.

21.5k25 gold badges124 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bjw Over a year ago

if this works would be useful to give an example

D.R. Over a year ago

Added my sample code from back in the days, however, the code is almost 6 years old and hasn't been used by myself for quite some time now, don't know if it still valid. All the best.

Community · Accepted Answer · 2017-05-23 12:06:53Z

0

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

For more information read this

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 1, 2016 at 18:48

Techidiot

1,9471 gold badge15 silver badges29 bronze badges

2 Comments

D.R. Over a year ago

I've found that as well ... thing is, I don't want to run a local web server. The app should be HTML only.

Marcel Over a year ago

@D.R. You can have a HTML only app running on localhost. E.g. today's PWA's in development mode do just that most of the time.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related