Alla inlägg av Carl-Johan Hagberg

Gör iframe responsive med css – Youtube videos m.m

Hur gör jag en iframe responsive?

Har du någonsin försökt göra en iframe responsive, t.ex en inbäddad Youtube video eller ett inbäddat spel? I sånt fall har du säkert märkt att det kan vara lite knepigt. Jag råkade ut för det här problemet när jag skulle lägga till en Youtube video i ett nytt blogginlägg på en av mina webbplatser med WordPress.

Eftersom webbplatsen i fråga är helt responsive så behövde jag att Youtube videon omformades beroende på webbläsarens storlek och enhetens bredd. Men när jag la till videon så hade den en fast höjd och bredd. Det såg bra ut på en stationär dator, men förstörde mer eller mindre sidans design när den visades på en mobiltelefon.

Jag började leta efter hur man gör så att en iframe ser bra ut i mobilen, eller surfplattan för den delen. Jag kom fram till att jag behövde en responsive iframe kod. Man skulle kunna tro att det räcker med att sätta bredden och höjden till 100% men jag märkte snabbt att det inte fungerade. För bredden fungerade det visserligen, men en iframe kräver att höjden har ett specifikt värde, annars ger webbläsaren ramen automatiskt en statisk höjd på 150 pixlar, vilket är alldeles för hoptryckt.

Lösningen var faktiskt ganska enkel. Så här gör du en iframe repsonsive:

Du behöver omsluta iframe koden med en <div> med relativ position och ange en padding på 56.25% för bildformatet 16:9 (widescreen), eller 75% för 4:3 (äldre format) eller det värde som passar just din iframe. Specificera sedan iframe höjden och bredden till 100% med absolut position. Detta kommer att tvinga den inbäddade ramen att expandera till full bredd automatiskt.

Så här ser css koden ut för responsive iframe

.iframeWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
}
.iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Därefter lägger du bara in HTML-koden för din iframe på din sida:

<div class="iframeWrapper">
<iframe width="541" height="302" src="https://example.com" frameborder="0"></iframe>
</div>

Observera att vissa nya wordpress teman redan har denna funktion automatiskt inkluderad.

Sortera Inlägg efter Egna Fält i WordPress

Om du har en blogg eller hemsida i WordPress, kanske du vill sortera dina inlägg efter Egna Fält (Custom Fields) istället för datum eller titel. Det här kan vara nödvändigt när du t.ex vill rangordna eller ranka inlägg efter betyg eller någon annan parameter. Fortsätt läsa Sortera Inlägg efter Egna Fält i WordPress