jquery can you fadeIn a video

I have a flv file inside the vid.html which is working fine, but is there any way to have the video itself to fadeIn/fadeOut?

<div id="fadeit">
    <div class="video"></div>
</div>

this does not work;

$('.video').hide().fadeIn().load('vid.html');

wr开发者_如何学编程apping it in a div and fading the div does not work either;

$('#fadeit').hide().fadeIn(1400);

---

no wmode or wmode transparent: FF, Chrome and Safari

wmode opaque, FF, Chrome, Safari and IE8 (only have ie8 to test)

Both fade flash and div overlay.

http://jsfiddle.net/WWvmz/2/

---

You cannot style flash stuff. You even cannot put eg a menu above a flash object.

(One of the reasons why flash must die)

---

A way to mimic this is by overlaying a full white absolutely positioned div over the iframe where the video is embeded in and fade out this div.

Set the div's standard CSS to "display: none;" to prevent the video from not being shown if people have javascript disabled and have jquery show it.

Sample CSS

#video_container {
    position: relative;

    width: 725px;
    height: 430px;
}

#video_overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 725px;
    height: 430px;

    background-color: #FFFFFF;
}

Sample html

<div id="video_container">
    <div id="video_overlay"></div>
    <iframe width="725" height="430" src="http://www.youtube.com/embed/TxvpctgU_s8?rel=0&showinfo=0&autoplay=1&loop=1"></iframe>
</div>

jquery

$("#video_overlay").show(); 
setTimeout(function() { 
    $("#video_overlay").fadeOut(1500); 
}, 2500);

I use the setTimeout function to have the overlay fadeout after the video is loaded (to prevent the black loading screen). This can be left out as well if you aren't bothered by the loading screen

$("#video_overlay").show(); 
$("#video_overlay").fadeOut(1500);

To fade out again

$("#video_overlay").fadeIn(1500);

jsfiddle: http://jsfiddle.net/RPjXv/2/