The YouTube player is not attached to the DOM error - problems with the Video > Controls > Advanced setting

[JesperF]

I have created a Component where you can click an icon to play a youtube video in a modal.
It works as it should, except when I have the Developer Tools open and close the modal. Then I see a lot of warnings/errors and a counter that just keeps on counting:

The error message is:
Uncaught (in promise) DOMException: Failed to load because no supported source was found.

And the warning with the counter says:
www-widgetapi.js:1200 The YouTube player is not attached to the DOM. API calls should be made after the onReady event. See more: https://developers.google.com/youtube/iframe_api_reference#Events

It can be replicated here: https://filecamp.com/video-test-july8-2023/

I have found that it has something to do with the Video > Controls > Advanced setting:

If I uncheck the Advanced checkbox, the problem disappears. But I would like to have the full-screen controls to be displayed as well

Any ideas on what to do?

[ruenel]

Hello @JesperF,

Thanks for writing in!

You are having the issue because you used the Video element incorrectly. Be advised that you cannot use 3rd party hosted videos in “Player” mode. It only accepts direct video URLs like https://example.com/video-file.mp4.

If you use a Youtube video, it should only be embed and your video source https://youtu.be/Zx_10bMLSA8?rel=0&autoplay=1&modestbranding=1 is not acceptable. You should be using the embedded code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Zx_10bMLSA8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Best Regards.

[JesperF]

Thanks a lot. Makes sense, and it looks a lot better now

Now I just need to get the video modal to fit the browser window height:

I think I’ve tried anything … any ideas?

Thanks

[christian]

Hey @JesperF,

The modal can fit the browser height but the video will not. It will respond only to width not height. With that said, you might want to play around with the Modal Width value.

If you still want that width, you can at least center the video in the Modal by enabling the Modal > Flexbox and setting Vertical to Center.

Video: https://imgur.com/ka2RZTD

[JesperF]

Thanks a lot

[prakash_s]

You are most welcome @JesperF