<div>
I would use CSS to pistion the icon<br />
<a href="http://stackoverflow.com/questions/5123489/how-to-overlay-a-play-button-over-a-youtube-thumbnail-image" rel="ugc">http://stackoverflow.com/questions/5123489/how-to-overlay-a-play-button-over-a-youtube-thumbnail-image</a>
</div>


I would use CSS to pistion the icon
http://stackoverflow.com/questions/5123489/how-to-overlay-a-play-button-over-a-youtube-thumbnail-image [http://stackoverflow.com/questions/5123489/how-to-overlay-a-play-button-over-a-youtube-thumbnail-image]

<div>
Hi<br />
<br />
That's pretty much what I am doing now...<br />
<br />
here is my code<br />
<br />
.loading &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ display: block; position: absolute; &nbsp;width: 510px; height: 275px; background:url(../images/a<wbr />jax-loader<wbr />.gif) no-repeat center #fff; z-index: 1000; top: 50px; right: 10px; &nbsp;}<br />

</div>


Hi

That's pretty much what I am doing now...

here is my code

.loading                              { display: block; position: absolute;  width: 510px; height: 275px; background:url(../images/ajax-loader.gif) no-repeat center #fff; z-index: 1000; top: 50px; right: 10px;  }


<div>
Thanks for the input, I gave up in the end....
</div>


Thanks for the input, I gave up in the end....

<div>
<div class="content wysiwyg-content">
Hi<br />
<br />
I have a client who has video on his site (quicktime)...<br />
<br />
He want to have an overlay with a spinny loading icon to display for a couple of seconds before it starts... I have done this with an absolute positioned div and an animated gif... then used jquery to make it dissapear after 2 seconds....<br />
<br />
This kind of works in firefox, but in ie and chrome the overlay sits nicely just behind the video.... not quite right...<br />
<br />
I have tried messing with z-index, but nothing will appear above the video....<br />
<br />
Any ideas where I can go from here?<br />
<br />
Cheers<br />
<br />
<br />
CD<br />

</div>
</div>


Hi

I have a client who has video on his site (quicktime)...

He want to have an overlay with a spinny loading icon to display for a couple of seconds before it starts... I have done this with an absolute positioned div and an animated gif... then used jquery to make it dissapear after 2 seconds....

This kind of works in firefox, but in ie and chrome the overlay sits nicely just behind the video.... not quite right...

I have tried messing with z-index, but nothing will appear above the video....

Any ideas where I can go from here?

Cheers


CD


overlay on top of video while loading

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.