Question

I dont know a lot of javascript but I wonder if this is possible:

I need the videos to be invisible and when I press one of my links a youtube embed fades in (and starts playing). Then when I mouseOver and mouseOut I want it to fade out and then be able to fade in again on mouseOver, but I don’t get it to work. I’ve had different results where the div seems to disappear (when I mouse over where the player used to be nothing fades in) and now im stuck at this:

Here is how far I’ve come with looking around here on stackoverflow for solutions:

Here’s a jsFiddle > http://jsfiddle.net/VKzxy/

And my jQuery:

/* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
     *       if possible. Other videos will be paused*/
    function playVideoAndPauseOthers(frame) {
        $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
            var func = this === frame ? 'playVideo' : 'pauseVideo';
            this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
        });
    }
    $('#links a[href^="#vid"]').click(function() {
        var frameId = /#vid(\d+)/.exec($(this).attr('href'));
        if (frameId !== null) {
            frameId = frameId[1]; // Get frameId
            playVideoAndPauseOthers($('#playlist' + frameId + ' iframe')[0]);
                        $($('#playlist' + frameId + ' iframe')[0]).fadeIn(750);
                        //When hovering, fadeIn.
                        $('#content').mouseenter(function(){
                                $($('#playlist' + frameId)[0]).fadeIn(750);
                        });
                        //When leaving, fadeOut.  
                        $($('#playlist' + frameId)[0]).mouseleave(function(){
                                $($('#playlist' + frameId)[0]).fadeOut(750);
                        });
        }
    });

edit: It does not have to be in javascript, any solution that works will be fine.

Answer 1

you need to:

• pause all videos

• hide them all

• show desired video

• play desired video

Here you go:

http://jsfiddle.net/5Yxhj/6/

NOTE

for the fade effect to work you have to set wmode to opaque, just like in the jsfiddle example.

src="http://www.youtube.com/embed/a-TrP8Z3Cb8?wmode=opaque& (...)

this will allow jQuery’s changes in opacity levels (actually this is what happens when calling fadeIn or fadeOut) to also show on top of the flash object. (actually when the iframe opacity changes).

HERE IS THE JS CODE THAT’S IN THE FIDDLE

function hideAll()
{
    $('#content').children('div').each(function()
    {
        $(this).hide();
    });
}

function fadeAll(strClickId)
{
    var elems = $('#content').children('div'), count = elems.length;

    elems.each(function()
    {
        $(this).fadeOut(750, function()
        {
            $(this).children('iframe')[0].contentWindow.postMessage(
                JSON.stringify({
                    "event": "command",
                    "func": "pauseVideo",
                    "args": ""
                }), "*"
            );
            if (!--count)
            {
                $(strClickId).fadeIn(750, function()
                {
                    $(strClickId).children('iframe')[0].contentWindow.postMessage(
                        JSON.stringify({
                            "event": "command",
                            "func": "playVideo",
                            "args": ""
                        }), "*"
                    );
                });
            }
        });
    });
}

$(window).load(function()
{
    hideAll();
});

$('#links a[href^="#vid"]').click(function()
{    
    var frameId = '#playlist' + $(this).attr('href').substr(4);
    fadeAll(frameId);
});