After looking through the YouTube IFrame API, I haven't been able to find anything that can help me.

My goal is to "hide" the loading screen a YouTube video has; i.e. this black screen with a spinning wheel. While it only appears for a brief second and doesn't bother me, it's bothersome when trying to use a YouTube as the background of an element.

My approach to solving this problem was to have a picture of the first frame of the YouTube video overlap the video and then hide it when video starts playing. I originally thought I'd be able to use onStateChange and watch for the YT.PlayerState.PLAYING value so I can hide the image but this event is triggered when it is about to start playing; in other words, it hides the images when the video is about to start playing which is when the loading screen appears.

Are there any other approaches to this or am I stuck with the brief loading screen or would a self-hosted video be the better approach? I wanted to avoid self-hosting the video because of bandwidth.

After looking through the YouTube IFrame API, I haven't been able to find anything that can help me.

My goal is to "hide" the loading screen a YouTube video has; i.e. this black screen with a spinning wheel. While it only appears for a brief second and doesn't bother me, it's bothersome when trying to use a YouTube as the background of an element.

My approach to solving this problem was to have a picture of the first frame of the YouTube video overlap the video and then hide it when video starts playing. I originally thought I'd be able to use onStateChange and watch for the YT.PlayerState.PLAYING value so I can hide the image but this event is triggered when it is about to start playing; in other words, it hides the images when the video is about to start playing which is when the loading screen appears.

Are there any other approaches to this or am I stuck with the brief loading screen or would a self-hosted video be the better approach? I wanted to avoid self-hosting the video because of bandwidth.

• javascript
• jquery
• html
• youtube-api

• The biggest hurdle is the iframe. You essentially can not touch anything inside the iframe. The only outside the box idea I could e up with would be to watch for the color of a pixel to change from black. You'll still be running into issues with reading any value inside the iframe. – hopkins-matt Commented Apr 20, 2015 at 18:24
• 2 Can't you listen to onStateChange when the video is cued (hence ready to play)? Before that you can hide the video, or obscure it by overlaying it with a blank element (or a still from the video), and then remove the overlay when video is cued. – Terry Commented Apr 20, 2015 at 18:33
• @Terry, my bad, I made a typo. I am listening to the onStateChange event. If I understand correctly, the cue status only applies for playlists and such since it's not being shown in the onStateChange event. – allejo Commented Apr 20, 2015 at 18:52
• @allejo You able to achieve this? Please let me know if Yes. – user5426326 Commented Oct 5, 2016 at 9:51

3 Answers 3

set the background of the iframe container to black and set the iframe opacity to 0, once it starts playing set the opacity back to 1

Host the video and use an API where you can; customize the media player, hide / show / customize load screens, cue points, start poster / end poster, etc. Or else your spending your time hacking youtube API capabilities with funky javascript.

JW player: http://www.jwplayer./

Flow Player: https://flowplayer/docs/cuepoints.html

And many others you could check out.

video.js, popcorn.js, etc etc.

<div id="player" style="background: #FFFFFF; opacity: 0;"></div>

// 2. This code loads the IFrame Player API code asynchronously.

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

// 4. The API will call this function when the video player is ready.

// 5. The API calls this function when the player's state changes. // The function indicates that when playing a video(state=1), // the player should play for six seconds and then stop.

if (event.data === 1) {
    console.log('video plays');
    document.getElementById("player").style.opacity = "1";
}