Iframe responsive maken
Op mijn website bied ik de mogelijkheid aan anderen om een gedeelte van mijn site te embedden. Nou geef ik, net als bijvoorbeeld Youtube, een width en height mee aan het iframe. Het probleem is alleen dat dat op mobiele websites niet helemaal goed uitkomt.
Ik heb gezocht hoe ik dat kan oplossen, maar kom eigenlijk alleen maar uitleg tegen waarbij je zelf het iframe op je site wilt. Dus waarbij je zelf de mogelijkheid hebt om een div om het iframe heen kan bouwen. Dat heb ik dus niet in dit geval.
Enig idee hoe ik kan zorgen dat het iframe responsive is, maar dan binnen de <iframe>...</iframe> tags wordt geregeld?
Groet
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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>
#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>
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?
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<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>
#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>
Gewijzigd op 18/11/2018 16:38:58 door Adoptive Solution
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?
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
@media (min-device-width:320px) and (max-device-width:1200px) {
#display {
overflow-y: scroll;
}
#display canvas,
#display iframe {
height: 450px;
}
}
#display {
overflow-y: scroll;
}
#display canvas,
#display iframe {
height: 450px;
}
}
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>
...