💾 Archived View for chirale.org › 2015-07-09_1254.gmi captured on 2024-05-12 at 15:22:46. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
I need to display a custom image cover in front of an embedded Youtube video.
After the video has stopped, I need to display again the clickable cover.
For a better graphical result I’ve added an over image for the cover and a fadein to the cover when the video ends. To do this I’ve used the Youtube iframe API.
This code is for jQuery If you have a newer version of jQuery and live() is not working change live() to on().
Here the html:
<a id="idcover" href="#" style="display: block; width: 100%;"> <img src="/path/to/cover/off.jpg" alt="Video"></a>
Here the js:
// include youtube API $.getScript("http://www.youtube.com/player_api"); var myselector = "#idcover"; // preload image displayed on over to avoid glitches: 900 with, 500 height overimg = new Image(900,500); overimg.src = '/path/to/cover/on/hover.jpg'; var offimg_src = overimg.src; $(myselector).live('mouseover', function (e) { offimg_src = $(this).find('img:first').attr('src'); $(this).find('img:first').attr('src', overimg.src); }); $(myselector).live('mouseout', function (e) { $(this).find('img:first').attr('src', offimg_src); }); $(myselector).live('click', function (e) { e.preventDefault(); // add video player container var playerid = 'yourplayercontainerid'; $(myselector).after('<div style="display: none;" id="' + playerid + '"></div>'); // I suppose the framework is loaded before the click, so this is not strictly necessary // function onYouTubeIframeAPIReady() { window.player = new YT.Player(playerid, { width: '100%', height: 720, videoId: '7W2vjTgzucA', // your youtube code here playerVars: { 'autoplay': 1, 'controls': 1, 'rel': 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange, // 'onError': onPlayerError } }); // } function onPlayerReady(event) { // hide cover $(myselector).hide(); // view the player $('#'+playerid).show(); } function onPlayerStateChange(e) { // se stopped (raggiunto il fondo), rimette il tappo e distrugge il video player if (e.data == 0) { $(myselector).fadeIn(500); // destroy iframe player window.player.destroy(); // destroy player container $('#'+playerid).remove(); // now the cover is ready to another click, and all // this process will restart on user click on cover } }