Responsivní poměrové zmenšování iframe

Responsivní youtube/vimeo iframe

Responsivní design webů (web svá CSS uzpůsobí pro potřeby mobilních zařízení = zmenší font, přeskládá obsah, skryje nedůležité prvky atd..) je v dnešní době velmi podstatný. Pkud pomocí něj pracujete s obrázky či HTML kódem, tak to většinou není problém, protože na vše lze použít úpravu CSS (zadávání šířek v procentech, poměrové zmenšování obrázků, atd..). V extrémních případech lze využít pomoc Javascriptu (osobně než čistý JS preferuji jQuery).

U iframe je problém, že výška/šířka daného prvku mohla být z nějakého důvodu nastavena uživatelem a chce tento poměr výsledku zachovat. Navíc není iframe jako iframe, protože iframe má youtube, vimeo, ale i google maps. Je tedy nutné odlišovat co s kterým iframe děláme. Někdy nám nemusí vadit jen zužovat iframe (= skrývat obsah z pohledu šířky) a jindy to je nežádoucí.

Jak dané iframe odlišit a celkově je udělat "mobile friendly" se dozvíte v článku.

Množství odlišných iframe znamená, že musíte buď každému iframe dávat speciální třídu (Př. google, youtube, vimeo, atd..) a dle ní se k dané skupině iframů chovat nebo využít regulární výrazi a ifram odlišovat dle jeho zdroje (atribut "src"). Každopádně bude nutné použít Javascript respektive jQuery. Důvodem je, že pomocí CSS nelze dynamicky měnit pevnou výšku iframe v závislosti na šířce.
Pokud by jste vytvořily CSS

iframe{ max-width: 100%; }

, tak dokážete vyřešit šířku, ale ne výšku.

Dalším problémem je, že CSS není schopné reagovat na různé poměry a rozměry iframe i stejné skupiny. Můžeme mít u sebe video ve formátu 16:9 a vedle 4:3 o stejné šířce a tím pádem jiné výšce. Řešením je tedy komplexní jQuery skript

//HTML cast


  


  


//CSS cast
iframe{
  max-width: 100%;
}

//jQuery cast


var pole_pomeru_stran_videa = [];
var nactene_videa = [];

function zmen_velikost_videa() {
  var sirka_bloku_videa = $(".obal_video").width();
  $.each(nactene_videa, function(index, value) {
    var soucasny_pomer_stran = $(this).outerHeight() / $(this).width();
    if( pole_pomeru_stran_videa[index] < sirka_bloku_videa ){
      //zuzene video => sniz jeho vysku pomerove
      $(this).removeAttr('height');
      $(this).css('height' , $(this).width() * 
      pole_pomeru_stran_videa[index]);
    }else{
      //video je mensi nez jeho obal => nech jak je
    }
  });
}

$( window ).load(function() {
  nactene_videa = $("iframe[src*='//http://www.youtube.com']"); // Najdi 
  vsechny YouTube videa ; Vimeo by bylo - iframe[src*='//player.vimeo.com']

  $.each(nactene_videa, function(index, value) { // Zjisti a uloz pomer stran pro kazde YouTube video
    pole_pomeru_stran_videa[index] = this.height / this.width;
  });

  zmen_velikost_videa();
});

$(window).resize(function() { //video se bude zmensovat i pri zuzovani velikosti prohlizece

  setTimeout(function() { //nevolej funkci po kazde zmene pixelu
  zmen_velikost_videa();
  }, 500);

});

Tento příklad je pro detekci youtube videa.

<< zpět