2

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

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

Sildoreth
  • 1,883
  • 1
  • 25
  • 38
enry
  • 21
  • 2

2 Answers2

1

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/"/>
        <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>
featherless
  • 2,118
  • 19
  • 19
0

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.

Brandon Pelfrey
  • 2,449
  • 6
  • 22
  • 22