I have limited knowledge of javascript, but I am curious if this idea can be achieved:
I want to make the videos on my webpage invisible initially. When a user clicks on one of my links, I want a YouTube embed to fade in and start playing. Then, when the user hovers over or moves their mouse away, I want the video to fade out and then be able to fade in again on hover. However, I am struggling to get it to work properly. I have tried different solutions from stackoverflow like this jsFiddle: http://jsfiddle.net/VKzxy/
Below is the jQuery code I've been working on:
/* 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);
});
}
});
Note: The solution does not necessarily have to be in javascript. Any method that achieves the desired functionality would be acceptable.