How to fix infinite loading of embedded YouTube video inside an iframe?

5
votes

I'm using videojs-youtube plugin to play embedded youtube videos inside my web-app. Recently I have noticed that when the web-app is being wrapped inside an iframe, the video gets stuck on infinite loading. The console doesn't show any related errors due this process.

While trying to debug this problem I realised that the PlayerStatus (as described in IFrame Player API) is being changed in a wrong way: When the video isn't wrapped in iframe the PlayerStatus changes from 'unstarted' to 'buffering' and to 'playing'. On the other hand, When the video is being wrapped in iframe the PlayerStatus changes from 'unstarted' to 'buffering' to 'unstarted' once again.

And there is one weird exception though - when chrome extensions such as AdBlock or LastPass are installed and activate, the video plays properly, even if its inside an iframe.

Any idea why is this happening? Thanks :)

1
javascriptiframeyoutube-apivideo.jsyoutube-iframe-api
Hi, I have the same issue, have you found any solution? - Arch1tect
Hi @Arch1tect. After a lot of research I noticed the bug relates to the chrome browser version. Therefore I opened a bug for it in chromium which you might want to follow as well: bugs.chromium.org/p/chromium/issues/detail?id=960376 - Idan Goor
@IdanGoor please consider post and accept your own answer - comments are temporal - Thank you. - Mauricio Arias Olave
@IdanGoor I've solved my problem, check my answer, may fix yours too - Arch1tect

1 Answers

0
votes

I had the same issue but I think I've found a solution for my problem after hours of trying... Adding allow="autoplay" to the iframe fixes it for me, it doesn't make total sense since sometimes it does work without adding this.

To clarify, I'm using video.js and videojs-youtube.js in an iframe, inside that iframe, if you play a Youtube video, another iframe is created inside the iframe. And I'm guessing that clicking on the video player to play Youtube video isn't considered user interacting with the inner iframe, because videojs-youtube programmatically tells youtube video to play in that inner iframe, and Chrome doesn't allow video inside an iframe to be played unless user has interacted with it.

This doesn't explain why 5 percent of the time it does play fine. Anyways, adding allow=autoplay to the outer iframe tag that contains the videojs player makes it work 100 percent of the time for me.