Korektní zobrazení tagu iframe

Návod jak docílit správného zobrazení iframů například z youtube.com, kdy má tento iframe jakoby nejvyšší možný z-index a nic ho nedokáže překrýt.

Tento problém je velice častý a jeho řešení není nikterak složité. Stačí do vygenerovaného iframu dodat "wmode=transparent" a iframe se bude chovat tak jek kdyby byl obyčejný div bez z-indexu.

Druhá cesta je automatická pomocí JQuery. Tuto cestu zvolíte pokud si nevkládáte videa sami a nemáte vlastní mechanizmus, který dodá výše zmíněný parametr danému iframu.

$(document).ready(function(){

    $('iframe').each(function(){
          var url = $(this).attr("src");
          var char = "?";
          if(url.indexOf("?") != -1){
                  var char = "&";
           }
        
          $(this).attr("src",url+char+"wmode=transparent");
    });

});

Důležité je mít knihovnu JQuery. Problémem tohoto řešení je právě samotné JQuery, které se musí načíst. Nejlepší cesta by byla vzít iframe co zadá uživatel a "dolepit" mu daný parametr ještě před uložením do databáze, či si daný iframe generovat sám a po uživateli chtít jen korektní url videa. Každopádně cesta přez JQuery tu je a funguje.

Zdroj: http://www.scorchsoft.com/blog/youtube-z-index-embed-iframe-fix/

<< zpět