Garth

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




Nejnovější články

Jak udělat stín bloku pouze na jedné straně?

CSS - Úvod do CSS

Jak detekovat klik na tlačítka myšy?

JavaScript - Úvod do JavaScriptu

Jak udělat odkaz na celý řádek tabulky?

JavaScript - Příklady v JavaScriptu

Jak zrušit tečky kolem odkazu?

CSS - Základy CSS

Jak fungují lomítka a tečky v url adrese?

(x) HTML - Úvod do HTML