trololol.js

jQuery(window).load(function() {
    
    // käydään kaikki youtube-kikkareet läpi, ja luodaan thumbnail
    jQuery('div.epgadget-externalvideo').each(function() {

        jQuery(this).after('<div class="Thumb"></div>');

        var iframe = jQuery(this).find('iframe');
        var iframe_src = iframe.attr('src');
        var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

        if (youtube_video_id.length == 11) {
            // debugger;
            var video_thumbnail = jQuery('<img class="VidThumb" src="//img.youtube.com/vi/'+youtube_video_id+'/0.jpg">');
            jQuery(this.nextSibling).append(video_thumbnail);

            jQuery(this).css({'display': 'none'});
            jQuery(this).find('img.VidThumb').css({'float': 'left', 'width': '185px', 'cursor': 'pointer'});
        }
    });

    // Lisätään kaikkiiin div.Thumb-elementteihin onClick handler. 
    jQuery('div.Thumb').each(function() {

        jQuery(this).on('click', function() {
            // debugger;
            jQuery(this.previousSibling).fadeToggle('400');
            jQuery(this.previousSibling).find('iframe').attr('src', jQuery(this.previousSibling).find('iframe').attr('src') + '?autoplay=1');
            jQuery(this).hide();
        });
    });
});

// Jäljellä olevia ongelmia:
// - Kun klikkaa tokaa videoo, se peittää ensimmäisen thumbnailin. Ensimmäinen thumbnail tarvii todennäköisesti jotain css-määrityksiä, ettei antais youtube-elementin hypätä päälle
// - div.Thumb::after attribuuttiin jää joku hämärä Video-teksti, tänkin saa varmaan piilotettua css:llä