Iframe responsive maken

Hier is code die ik ooit tegenkwam.

Bij de tweede <style> vul je bij #video max-width de breedte in.

Bij canvas en iframe de breedte en de hoogte.

Bij iframe src de link naar de video.

Als je een andere max-width wilt hebben hoef je alleen bij #video de juiste waarde in te vullen.

De rest is oefenen met de juiste verhouding.

<style>

#video img,
#video iframe,
#video embed,
#video object,
#video video,
#video canvas {
	top: 0px;
	left: 0px;
	width: 100%;
	max-width: 100%;
	height: auto;
	}

#video img,
#video iframe,
#video embed,
#video object,
#video video {
	height: 100%;
	position: absolute;
	}

</style>

<style>

#video {
	max-width: 720px;
	overflow: hidden;
	position: relative;
}

</style>

<h2>Scalable video</h2>

<div id="video">

<canvas width="720" height="405" ></canvas>

<iframe src="//player.vimeo.com/video/88198290?badge=0" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</div>

Wat je ook vaak ziet is een klein formaat, en in het paneel van youtube zelf zit gewoon een knop om dit schermvullend te maken?

Het is een site met sportuitslagen. Om de bekendheid van de site te vergroten is het voor mij goed als veelbezochte sites een deel van de uitslag embedden. Dus het gaat niet om video's in dit geval.

De code die ik nu aanbied is van <iframe> tot </iframe> met width en height. Youtube doet dat ook zo zag ik bij insluiten.

In het voorbeeld van Adoptive Solution zit je wel buiten het iframe te kleuren met #video. Of zou ik dan gewoon een div eromheen moeten zetten met inline style element? Dat ziet er misschien wat raar uit voor degene die het embed, maar kan in principe geen kwaad toch? Ik had al zoiets geprobeerd met die voorbeelden maar dan gaat het telkens mis met de hoogte, meeste voorbeelden gaan allemaal uit van video namelijk.

@Thomas: Heb je een concreet voorbeeld? Of gaat dat ook specifiek over video?

Deze code kan je voor elk soort media gebruiken waarvoor het nodig is om, in dit geval, een iframe te gebruiken.

Alleen de width en height in de 2de <style> set en <canvas> aanpassen.

Voor het leuk is de scrollbar aangepast. Ben vergeten waar ik het heb gevonden.

Code werkt op Desktop en, in mijn geval, een iPad.

Paginavenster vergroten, verkleinen, in landschap of portret. Het werkt.

Het helpt ook als de in de sluiten pagina ook responsive is.

Hoe je de code verspreid naar derden moet u zelf oplossen. Misschien in een makkelijk pakketje aanbieden zodat de ontvanger het alleen hoeft te plakken.

<style>

#display img,
#display iframe,
#display embed,
#display object,
#display video,
#display canvas {
	top: 0px;
	left: 0px;
	width: 100%;
	max-width: 100%;
	height: auto;
	}

#display img,
#display iframe,
#display embed,
#display object,
#display video {
	height: 100%;
	position: absolute;
	border-collapse: collapse;
	}

</style>

<!-- BEGIN in style hierna eigen waarden gebruiken -->

<style>

#display {
	max-width: 920px;
	position: relative;
	-webkit-overflow-scrolling: touch;
}

#display iframe {
	height: 100%;
	width: 100%;
	border:none;
}

@media (min-device-width:320px) and (max-device-width:1200px) {
	#display {
		overflow-y: scroll;
	}
}

</style>

<!-- EINDE in style hierna eigen waarden gebruiken -->

<!-- Geef de standaard scrollbar een leuke uiterlijk -->

<style>

#display ::-webkit-scrollbar {
	width: 12px;
}

/* Track */
#display ::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
 
/* Handle */
#display ::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: rgba(255,0,0,0.8); 
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
#display ::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}
</style>

<h2>Scalable webpagina in iframe</h2>

<div id="display">
	<canvas width="920" height="550" ></canvas>
	<iframe src="https://maken.wikiwijs.nl/96699/" width="100%" height="100%"></iframe>
</div>

Ik heb je voorbeeld even geprobeerd, maar in dat voorbeeld wordt een iframe met scroll gebruikt, dat wil ik niet. De breedte gaat op die manier wel goed op de mobiel, maar de hoogte niet.

Mijn iframe is (maximaal) 600x450. Op de desktop doet hij het dan goed als ik dat in de canvas en #display zet. Op de mobiel krijg ik dan maar 2/3 van de hoogte, waardoor een deel verstopt is. Enig idee hoe ik dat kan voorkomen?

Kijk eens of dit helpt :

@media (min-device-width:320px) and (max-device-width:1200px) {
	#display {
		overflow-y: scroll;
	}
	#display canvas,
	#display iframe {
		height: 450px;
	}
}

Kijk aan, dat werkt! Ik bied nu ook gewoon de code kant-en-klaar aan, maar dan dus alleen <iframe>...</iframe>.

Het enige is dat ik dan dus een soort eigen CSS-pakketje voor de responsive versie moet meegeven denk ik? Zodat de display en canvas de juiste styling krijgen?

Dus:
<responsive css voor iframe>
<display>
<canvas>
<iframe>
...