Iframe responsive maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Junior Java ontwikkelaar @ Rotterdam

2021-11-28 iSense Junior Java ontwikkelaar Heb jij jouw HBO of WO studie afgerond en wil je graag opgeleid worden tot Fullstack Java Developer? Mooi! Op 7 februari 2022 starten wij met ons Graduate Programma waarin je na een driemaandelijkse betaalde bootcamp mag gaan starten bij een hele toffe opdrachtgever. Ben jij klaar voor deze stap? ISNA51151 Wat ga je doen tijdens het Fullstack JAVA ontwikkeltraject? Vanaf 7 februari 2022 krijg jij via de Experis Academy een unieke kans om jouw IT-carrière een kickstart te geven en jezelf te ontwikkelen tot Fullstack Java Developer. Zo volg je de eerste drie maanden

Bekijk vacature »

Startersfunctie .NET Developer @ Amsterdam

2021-10-27 iSense Startersfunctie .NET Developer Heb je onlangs een hbo-, wo-opleiding of een minor richting de IT afgerond OF heb jij middels cursussen je sporen verdiend in het programmeren en wil je graag aan de slag als Fullstack .NET Developer? Lees dan snel verder! Want in januari/februari 2022 start de Experis Academy weer met een leerprogramma waarin IT-experts je opleiden tot developer met als specialisatie .NET. Dit allemaal met een salaris en een vooruitzicht op een baan bij een topwerkgever. ISLE50174 Regio Amsterdam en omstreken Wat houdt de startersfunctie .NET Developer in? Vanaf januari/februari 2022 krijg jij via de Experis

Bekijk vacature »

Junior Fullstack .NET Developer @ Regio Amsterdam

2021-10-25 iSense Junior Fullstack .NET Developer Ben je onlangs afgestudeerd van een IT-opleiding of heb je nog maar weinig ervaring opgedaan? En wil je toch graag aan de slag als .NET Developer? Lees dan snel verder, want begin januari 2022 starten wij weer met een betaald traineeship waarin jij jezelf kunt ontwikkelen tot een volwaardige Fullstack .NET Developer! ISLE50166 Locatie Amsterdam en omstreken Wat ga je doen tijdens het Fullstack .NET Developer ontwikkeltraject? In januari krijg jij via de Experis Academy een unieke kans om jouw IT-carrière een kickstart te geven en jezelf te ontwikkelen tot Fullstack .NET Developer. Zo

Bekijk vacature »

Junior Fullstack .NET Developer @ Regio Rotterdam

2021-10-18 iSense Junior Fullstack .NET Developer Heb je onlangs een hbo-, wo-opleiding of een minor richting de IT afgerond OF heb jij middels cursussen je sporen verdiend in het programmeren en wil je graag aan de slag als Fullstack .NET Developer? Lees dan snel verder! Want in januari/februari 2022 start de Experis Academy weer met een leerprogramma waarin IT-experts je opleiden tot developer met als specialisatie .NET. Dit allemaal met een salaris en een vooruitzicht op een baan bij een topwerkgever. ISLE51116 Locatie Rotterdam en omstreken Wat ga je doen tijdens het Fullstack .NET Developer ontwikkeltraject? Vanaf januari/februari 2022 krijg

Bekijk vacature »

Medewerker ICT servicedesk

De afdeling Informatievoorziening is richtinggevend op het gebied van informatievoorziening, fungeert als waterschap brede informatiedienst en levert de benodigde ICT. De afdeling heeft een proactieve instelling om tijdig te kunnen inspelen op ontwikkeling en technologieën op het tempo van verandering. De afdeling Informatievoorziening zoekt wegens interne doorstroming een enthousiaste medewerker voor de functie van: Medewerker ICT servicedesk voor 36 uur per week, locatie Hoofdkantoor Zwolle Wat ga je doen? Voor een Medewerker ICT servicedesk zullen de werkzaamheden op hoofdlijnen bestaan uit: aannemen en registreren van ICT vragen, klachten en verstoringen, telefonisch of schriftelijk; beantwoorden van vragen en het oplossen van

Bekijk vacature »

Servicedesk-medewerker IT

Zet jij een tevreden klant altijd op nummer één? En zoek jij een baan waarin je als Servicedesk-medewerker jouw expertise in kan zetten om eindgebruikers te helpen bij het oplossen van hun ICT problemen? Dan ben jij degene die we zoeken! Wat ga je doen? Als servicedesk-medewerker ben jij het eerste aanspreekpunt voor de eindgebruiker. De klantvragen die jij krijgt, los je indien mogelijk direct op en registreer je in Topdesk. Wat je niet kan oplossen, zet je door naar het juiste DevOps-team. Je komt te werken binnen een team waar jij samen met je collega's verantwoordelijk bent voor de

Bekijk vacature »

Java/ Cloud developer @ Amsterdam

2021-11-17 iSense Java/ Cloud developer Do you like DevOps way of working? Are you looking for an exciting opportunity where latest and greatest technologies are applied to solve everyday problems? Would you like to take responsibility in each and every step of software development lifecycle and be a part of a team that create services for the external users? Apply now!!! ISAA51764 Organization You will work in a global financial organization with a head office in the Netherlands. You will be part of one of the most important department which is the payments environment. The organization has a very strong

Bekijk vacature »

Medior PHP developer

De vacature Bij Emerit vinden we het super belangrijk dat je blij wordt van wat je doet. Word jij blij van het werken aan van (grote) softwareprojecten? Kun je collega’s aansturen en helpen met lastige oplossingen? Dan zoeken we jou! Als medior PHP developer werk je mee in de uitvoering van onze verschillende software-projecten. Voordat het (deel)project gepland kan worden moet duidelijk zijn welke taken er uitgevoerd moeten worden. Je helpt bij het uitwerken van deze taken en overdracht ervan naar de projectmanager. Voor technische vraagstukken ben jij soms een aanspreekpunt voor de klant. Je denkt mee over dé beste

Bekijk vacature »

PHP developer fulltime

Als PHP developer bij Getnoticed werk je in een team met acht directe collega’s. Bij ons geen hiërarchie of weken beslissingstijd. Dit betekent korte lijnen en snel schakelen. Dat is ook wel nodig bij alle innovatieve projecten waar we tegelijkertijd aan werken, zoals Google Cloud Talent Solution. Jouw functie bij Getnoticed is voornamelijk het bedenken van oplossingen voor klanten, hen hierin adviseren en het schrijven van koppelingen. Je hebt hier veel vrijheid maar kunt altijd bij collega’s terecht om te sparren. In een week kun je zo voor 4 á 5 verschillende klanten werken. Dit houdt je werk afwisselend. Naast

Bekijk vacature »

Junior JAVA ontwikkelaar @ Eindhoven

2021-10-30 iSense Junior JAVA ontwikkelaar Heb jij jouw HBO of WO studie afgerond en wil je graag opgeleid worden tot Fullstack Java Developer? Mooi! Op 7 februari 2022 starten wij met ons Graduate Programma waarin je na een driemaandelijkse betaalde bootcamp mag gaan starten bij een hele toffe opdrachtgever. Dit uiteraard met begeleiding van leraren uit de praktijk, seniors, een talent coach en vele workshops. Ben jij klaar voor deze stap? ISNA51136 Wat ga je doen tijdens het Fullstack JAVA ontwikkeltraject? Vanaf 7 februari 2022 krijg jij via de Experis Academy een unieke kans om jouw IT-carrière een kickstart te

Bekijk vacature »

Python Developer @ Ijmuiden

2021-11-19 iSense Python Developer Ben jij een Python Developer die affiniteit heeft met data en die het belangrijk vindt om bij te dragen aan een betere aarde? Zet je kennis in bij een groot onderzoeksinstituut en ontwikkel binnen een klein team aan verschillende datasets! Meer weten? Lees snel verder... ISHU51675 Organisatie Wat ga je doen? Als Python Developer zul jij je voornamelijk bezig houden met het ontwikkelen, testen en implementeren van applicaties en ligt jouw focus op het combineren van data en slimme oplossingen. De data waar jij mee werkt wordt op verschillende manieren verzameld en vervolgens gecontroleerd met moderne

Bekijk vacature »

Startersfunctie JAVA developer @ Regio Eindhoven

2021-09-23 iSense Startersfunctie JAVA developer Heb je onlangs een hbo-, wo-opleiding of een minor richting de IT afgerond en wil je graag aan de slag als Fullstack JAVA Developer? Lees dan snel verder! Want in februari 2022 start de Experis Academy weer met een leerprogramma waarin IT-experts je opleiden tot developer met als specialisatie JAVA. Dit allemaal met een salaris en een vooruitzicht op een baan bij een topwerkgever. ISLE49796 Meerdere functies beschikbaar Wat ga je doen tijdens het Fullstack JAVA ontwikkeltraject? Vanaf februari 2022 krijg jij via de Experis Academy een unieke kans om jouw IT-carrière een kickstart te

Bekijk vacature »

C# developer

C# developer Als C# developer bij Profit4Cloud ontwikkel jij de back-end en soms ook front-end oplossingen van (over)morgen. We omarmen innovaties en zoeken daarvoor versterking in ons .Net-team. Je werkt samen met enthousiaste en eigenzinnige professionals. We zijn altijd bezig met 'the next big thing', of het nu gaat om het ontwikkelen van een nieuwe applicatie, het ontwikkelen van Cloud-native applicaties of het herschrijven van een bestaande. Jouw specificaties Afgeronde HBO of WO-studie in Informatica, ICT of iets wat daarop lijkt minimaal 2 jaar ontwikkelervaring C# en Javascript is jouw second nature. Angular, React of NodeJS zijn een pré Je

Bekijk vacature »

Senior Front-End Developer

As a Senior Front-end Developer you maintain the balance between creativity and functionality for our webshop, and you coach your fellow developers. How do I become a Senior Front-End Developer at Coolblue? As a Front-end Developer you work on the user-friendliness of our webshop for millions of customers. You enjoy working with the UX Designer to pick up stories. You get energy from coming up with creative solutions and are happy to present this within the team. You are also proud of your work and welcome all feedback. Would you also like to become a Front-End Developer at Coolblue? Read

Bekijk vacature »

BI Developer @ Utrecht

2021-10-20 iSense BI Developer Do you have a passion for database / BI development? Are you enthusiastic about your profession? Do you like to share your knowledge and actively learn from others? Do you have experience with SQL Server? If you answers are yes, then don’t hesitate to apply! ISKE49244 Organization You will work in Utrecht with one of the biggest financial institutions in the Netherlands. They operate cooperative on international financial services and are always on the lookout for the newest tools & technologies. The department you will come to work is the domain which is responsible for delivering

Bekijk vacature »
G Jansma

G Jansma

17/11/2018 16:57:05
Quote Anchor link
Hallo,

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
 
PHP hulp

PHP hulp

03/12/2021 14:44:34
 
Adoptive Solution

Adoptive Solution

17/11/2018 18:17:28
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
Thomas van den Heuvel

Thomas van den Heuvel

18/11/2018 00:15:46
Quote Anchor link
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?
 
G Jansma

G Jansma

18/11/2018 00:33:51
Quote Anchor link
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?
 
Adoptive Solution

Adoptive Solution

18/11/2018 16:37:26
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
Gewijzigd op 18/11/2018 16:38:58 door Adoptive Solution
 
G Jansma

G Jansma

19/11/2018 13:31:24
Quote Anchor link
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?
 
Adoptive Solution

Adoptive Solution

19/11/2018 14:04:59
Quote Anchor link
Kijk eens of dit helpt :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
    }
}
 
G Jansma

G Jansma

19/11/2018 15:56:04
Quote Anchor link
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>
...
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.