Responsiva iframes med Javascript

Igår när jag skulle posta ett inlägg som innehöll många Youtube-klipp stötte jag på problemet att om man t.ex. via en iPhone gick in på sidan så såg iframe-elementen på tok för höga ut (blev svarta lister under och över själva klippet). Att anpassa en iframe på bredden är inte särskilt svårt med hjälp av CSS:

1iframe {
2    max-width: 100%;
3}
1iframe {
2    max-width: 100%;
3}

Men på höjden kan vara lite tuffare.

Man kan visserligen förlita sig helt på CSS för att anpassa t.ex. ett Youtube-klipp responsivt också, som i det här exemplet. Men då jag använder markdown för att posta min inlägg på den här bloggen så vill jag inte behöva lägga in en massa div-taggar i onödan. Vidare så försöker jag undvika att dra in bibliotek så som jQuery på sidan – så jag skrev det här mycket enkla skriptet som använder den klassiska "förhållningsregeln" (xa förhåller sig till ya så som xb förhåller sig till yb) från gymnasiematten:

 1function resizeFrames() {
 2
 3    var iframes = document.body.getElementsByTagName('iframe');
 4    var mainDiv = document.getElementById('main');
 5
 6    var elementHeight;
 7    var elementWidth;
 8    var realHeight;
 9    var realWidth;
10
11    for (var i = 0; i < iframes.length; i++) {
12
13        elementWidth = iframes[i].width;
14        elementHeight = iframes[i].height;
15        realWidth = mainDiv.offsetWidth;
16        realHeight = iframes[i].offsetHeight;
17
18        iframes[i].width = realWidth;
19        iframes[i].height = ((realWidth*realHeight) / elementWidth);
20
21    };
22}
23
24window.onload = function() {
25    resizeFrames();
26}
 1function resizeFrames() {
 2
 3    var iframes = document.body.getElementsByTagName('iframe');
 4    var mainDiv = document.getElementById('main');
 5
 6    var elementHeight;
 7    var elementWidth;
 8    var realHeight;
 9    var realWidth;
10
11    for (var i = 0; i < iframes.length; i++) {
12
13        elementWidth = iframes[i].width;
14        elementHeight = iframes[i].height;
15        realWidth = mainDiv.offsetWidth;
16        realHeight = iframes[i].offsetHeight;
17
18        iframes[i].width = realWidth;
19        iframes[i].height = ((realWidth*realHeight) / elementWidth);
20
21    };
22}
23
24window.onload = function() {
25    resizeFrames();
26}

Och som en liten bonus, om man använder en design som är "fluid" kanske man vill att funktionen ska exekveras varje gång som användaren ändrar storleken på webbläsarfönstret.

1window.onresize = function() {
2    resizeFrames();
3}
1window.onresize = function() {
2    resizeFrames();
3}

För att se ett demo "in action" kan du kolla in det här inlägget.

Värt att notera är att om man ökar och minskar webbläsarfönstret flera gånger så kommer till slut måtten att sluta stämma, då flyttal inte används – men det duger gott och väl till de flesta ändamålen.

Ser du något som inte stämmer, eller som kan göras bättre? Hojta till på Twitter!