Remove black loading screen from YouTube embed looped video

Question

I've checked out the other threads about this, but couldn't really find what I'm after.

I've embedded a YouTube video in iFrame form. It's set to autoloop. Here's the parameters:

?showinfo=0&rel=0&autoplay=1&loop=1&controls=0&playlist=SeFzUzde5BM

The problem is that before the video starts, there's a black screen with a loading bar. That in itself isn't too bad, but then when the video goes to loop, it does that again! Why does it need to load itself twice? Is there anyway to have it seamlessly loop, without the loading screen breaking up each loop?

Answer 1

Your question seems to be answered here:

YouTube embedded video auto loop without refresh screen

However if that link becomes un-available the answer is using a Youtube Embed Api code. called player.getPlayerState() .You basically check that the video has "ended" and then run the .playVideo(); function. which starts it again immediately.

Youtube API : focused on Playback Status

I added this 'if' statement to the code provided at the top of the Youtube API page.

if (event.data === YT.PlayerState.ENDED) {
        player.playVideo(); 
    }

NOTE: As you can see you have to set it up as a separate script first instead of running it in-line in the html (it's easier to keep track of too). I suggest looking at the YouTube API linked above for extra help.