I was given this code a little over a year ago on stack - Overlay youtube embedded video with image, hide image when clicked and autoplay
Please see in practice - http://plnkr.co/edit/WbWvOR or preview http://run.plnkr.co/plunks/WbWvOR/
It works really well, however I would now like to modify it slightly so that the video also autoplays on mouse hover like - http://www.interactivepixel.net/ccLivePlaylist/index_wall.html
All ideas welcome, Thanks for your help
Judi
What you are seeing is not actually playing the video from YouTube or Vimeo. It's playing a short clip that is stored on their server.
For example, here is the video that you see for the first box on your InteractivePixel link.
That script is a paid script called "Live Playlist by Tean". He has his code available on CodeCanyon for purchase, with documentation.
If you want to have that feature on your site, I suggest you either buy the script, or do a search on "HTML 5 Live Playlist" or something similar.
Otherwise, to just have the video play on mouseover, since you are embeding the video using HTML5, you can just use a combo of jQuery .hover() and regular javascript .play(). However keep it mind it won't be smooth like the demo you showed, since on the hover, it has to go out and make the connection with YouTube to start to play the video.
$("#theVideoElement").hover(function(){
document.getElementById('videoId').play();
});
To have it display without controls, you'll need to set the controls URL parameter in your iframe to 0.
$('#ytapiplayer2').append('<iframe width="1130" height="636" src="http://www.youtube.com/embed/YOURVIDEOCODEHERE?controls=0" frameborder="0" allowfullscreen></iframe>');
