title: "Hide" a YouTube Video's Loading screen
body: <p>After looking through the <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow noreferrer">YouTube IFrame API</a>, I haven't been able to find anything that can help me.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/LpW2R.png" alt="YouTube video loading"></p>
  
  <p>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 <code>onStateChange</code> and watch for the <code>YT.PlayerState.PLAYING</code> 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.</p>
  
  <p>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.</p>