Javascript fade in fade out div with youtube video

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.

Please don't use PasteBin. This is precisely what jsFiddle was created for... — BenM, Jan 20 '13 at 15:07
@Rob next time please upload your code here http://jsfiddle.net/ — rusly, Jan 20 '13 at 15:10

canolucas · Accepted Answer · 2013-01-22T11:36:24.657

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);
});

I'm sorry, I don't know enough to make that work. I tried but no luck. — Rob, Jan 20 '13 at 17:16
Yes! Just changed the fadeIn to setTimeout(function () {$(frameId).fadeIn(750);}, 750); to make the change between videos better. Now just to make the selected video to fadeIn/Out on mouseEnter/Leave. — Rob, Jan 20 '13 at 20:49
Hmm it does not seem to pause the playing video when I press video 2 link. — Rob, Jan 20 '13 at 21:24
you will have to do something like this for it to pause: http://jsfiddle.net/eXPuS/ — canolucas, Jan 20 '13 at 22:23
and for it to resume playing: http://jsfiddle.net/eXPuS/1/ sorry for the delay. this one is the good one. — canolucas, Jan 20 '13 at 22:29
no problem. check the last fiddle that is in the main answer. it also has opacity working. good luck. — canolucas, Jan 20 '13 at 22:43

Javascript fade in fade out div with youtube video

1 Answers1

Linked