Preload javascript an Embedded player

Question

If I have HTML with embedded code inside, for example a embedded player of YouTube, can I build in JavaScript, AJAX, etc. preloader for this player?

Because if I have only the player embedded, the page is white in the loading moment, and later the player shows itself...

Answer 1

Perhaps I'm misunderstanding, but if the embedded component can signal a DOM event, you can catch it with javascript and replace some splash image with the actual loaded player. It's kins of specific to the content you're embedding.

Answer 2

If you can't modify the flash file to suit your needs (as is the case when using a YouTube clip), you could place a div behind the embedded object. The embed object will obscure your "splash" div when it loads - assuming that it has no transparency.

.wrapper {
  width: 425px;
  margin: 0 auto;
}

.splash {
  position: absolute;
  width: 425px;
  height: 344px;
  background-color: red;
  z-index: -1;
}

<div class="wrapper">
  <div class="splash"></div>
  <object width="425" height="344">
        <param name="movie" value="http://www.youtube.com/"/&gt;
        <param name="allowFullScreen" value="true"/>
        <param name="allowscriptaccess" value="always"/>
        <embed width="425" height="344" src="http://www.youtube.com/" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"/>
  </object>
</div>