Iframe responsive maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Full stack developer Node.js

Functie Als fullstack JavaScript developer vind jij het uitdagend om op basis van concrete klantvragen nieuwe functionaliteiten te ontwikkelen. Bij voorkeur worden deze functionaliteiten op een bepaalde manier geprogrammeerd, zodat ze door meerdere klanten te gebruiken zijn. Je hebt dus vaak te maken met abstracte vraagstukken. Om dit te kunnen realiseren sta je nauw in contact met de product owner en/of klant. Je bent niet alleen onderdeel van het development team, maar hebt ook vaak contact met de product-owner en/of klanten om daardoor inzichten te verzamelen die leiden tot productverbeteringen. • Inzichten verzamelen bij de klant en/of product owner •

Bekijk vacature »

Back-end programmeur

Functieomschrijving Heb jij kort geleden jouw HBO ICT diploma in ontvangst mogen nemen? Of ben je toe aan een nieuwe uitdaging? Voor een uitdagende werkgever in omgeving Waalwijk zijn wij op zoek naar een enthousiaste softwareontwikkelaar met kennis of ervaring met C# en SQL. In een uitdagende rol als C#.NET Developer werk je samen met een enthousiast en informeel team aan het bouwen van maatwerk software voor variërende klanten. Verder ziet jouw takenpakket er als volgt uit: Je draagt bij aan de implementatie van aanpassingen, verbeteringen en aanvullingen in de C# based applicaties; Je houdt je bezig met het ontwikkelen

Bekijk vacature »

Python (Django) developer - Remote in The Netherla

Functie Together with your team, consisting of a senior, 2 mediors and one junior developer, you will work on their software in an Agile-based approach. You have an eye for quality, risk, and customer interest. Communication with your colleagues and, where necessary, with customers, plays an important role in achieving a successful result. As a person, you are smart, get things done, and are result-oriented. There is a lot of independence within the development team, apart from the stand-up (10:00 am) and occasional pair-programming sessions. Techniques they use include Python, Django, MySQL, Mercurial, Ubuntu Linux, Nginx. In terms of front-end

Bekijk vacature »

Java/Kotlin Developer

Java/Kotlin Developer Ben jij een ervaren Java/Kotlin developer met een passie voor het automatiseren van bedrijfsprocessen? Wil je graag deelnemen aan uitdagende projecten bij aansprekende klanten? En ben je op zoek naar een professioneel, ambitieus en dynamisch bedrijf om je carrière verder te ontwikkelen? Kom dan ons team bij Ritense in Amsterdam versterken! Zo ziet de functie eruit: Als Java/Kotlin developer bij Ritense ben je verantwoordelijk voor de ontwikkeling en implementatie van applicaties die bedrijfsprocessen automatiseren, zodat onze klanten slimmer, efficiënter en klantgerichter kunnen werken. Als developer ben je in de lead en zorg je voor de correcte oplevering van

Bekijk vacature »

Software Developer (Junior functie)

Functieomschrijving Wij zijn op zoek naar een Software Developer! Sta jij in de startblokken om je carrière te beginnen en kan je niet wachten om toffe software te gaan ontwikkelen? Kortom, ben je onlangs afgestudeerd of sta je op het punt om je papiertje te behalen? Voor een IT dienstverlener dat gespecialiseerd is in Microsoft technologie zijn wij op zoek naar C#.NET Developers. Het bedrijf heeft meerdere klanten in regio Utrecht waar je permanent kan komen te werken. Kom je liever te werken bij een klein softwarebedrijf of bij een groot consultancy bureau? Dat is helemaal aan jou de keuze!

Bekijk vacature »

.Net Ontwikkelaar

Dit ga je doen Het ontwerpen en ontwikkelen van software voor klanten; Het bijdragen van kennis en ervaring; Het integreren van van de software en afstemmen met klanten; Het functioneel testen van de ontwikkelde software. Hier ga je werken Voor onze relatie zijn wij momenteel op zoek naar een .Net Developer die wilt werken aan software die draait op machines wereldwijd. De organisatie produceert software voor applicaties die gebruikt worden in verschillende branches. De software wordt geleverd aan fabrikanten van verschillende robotica en machines. Als .Net ontwikkelaar ben je intern onderdeel van het team wat de applicatie omgevingen ontwikkeld en

Bekijk vacature »

Software Programmeur PHP - JAVA

Functie Heb jij altijd al willen werken voor een bedrijf, dat veilige netwerkverbindingen levert, door middel van veilige oplossingen, die door middel van de nieuwste technologieën ontwikkelt zijn? Stop dan nu met zoeken! Voor een opdrachtgever in omgeving Moordrecht zijn wij op zoek naar een programmeur. Hoe kan jouw dag er straks uitzien? Je gaat software en webapplicaties ontwikkelen met behulp van de talen C / C++ / PHP. Je gaat technische klussen uitvoeren op locatie bij klanten. Je onderhoudt contact met de projectleider om er zeker van te zijn dat een projecten goed verlopen. Je gaat klanten ondersteunen op

Bekijk vacature »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

C#.NET developer

Functie Het development team bestaat momenteel uit vijf backend C#/.NET ontwikkelaars. Op dit moment zit één ontwikkelaar dedicated op de mobiele applicatie. Als team werk je samen aan het zelf ontwikkelde software platform. Dit bestaat uit zowel apps als websites. Om het systeem door meer dan honderdduizenden gebruikers wordt gebruikt is het bijna vanzelfsprekend dat de kwaliteit van het product hoog moet liggen. Het systeem bestaat uit drie projecten. Je werkt dus aan deze drie projecten waarbij de focus op z’n tijd verschuift. De technieken die worden toegepast zijn o.a. .NET Core, Xamarin, C# en MVC. Je zal dus met

Bekijk vacature »

Anaplan Developer

Dit ga je doen What are you going to do: Picking up Stories: Design planning had, how are we going to build it in Anaplan; Talking to the end user to build a forecasting model; Having contact with the data team about which data is needed; Being able to convert an Excel sheet into a 3, 4 or 5 dimensional modeling environment; Giving knowledge sessions about Anaplan; Solving incidents; Making instructional videos on how teams should read forecasts; Writing blogs about forecasting. Hier ga je werken We are looking for an Anaplan Builder to deliver end-to-end solutions within a big

Bekijk vacature »

Frontend Developer Vue Nuxt HBO Javascript

Samengevat: Deze werkgever levert elke dag betere digitale gebruikerservaringen. Ben jij geschikt als frontend Developer? Heb je ervaring met Vue en Nuxt? Vaste baan: Front-End Developer HBO €3.100 - €4.600 Zij bieden opdrachtgevers een complete dienstverlening op gebied van ontwerpen en ontwikkelen van websites, zoekmachine optimalisatie, online adverteren, content marketing en conversie verbetering. Zij werken met een eigen ontwikkeld CMS. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om de inzet van technologie. Deze werkgever staat open voor elke nieuwe trend. Onze systemen zijn groot

Bekijk vacature »

Back-end ontwikkelaar

Functie omschrijving Wil jij meebouwen aan diverse databasesystemen in een klein bedrijf met een platte organisatie? In een team van ruim 10 ontwikkelaars wordt er aan diverse ICT oplossingen gewerkt. Jouw taken hierbij zullen bestaan uit: Het onderhouden en door-ontwikkelen van bestaande databases. Denk hierbij aan schema verbeteringen en performance-tuning. Bij nieuwe ontwikkelingen ga jij ook bezig met het bouwen van het databaseschema. Omdat je in een klein team werkt zal je ook de C# routine verder uitbouwen en ontwikkelen. Ook kan je meedraaien in algemene refactory-, ontwikkel- of testwerkzaamheden. Je zal voornamelijk gebruik maken van de volgende technieken: .NET

Bekijk vacature »

.NET Developer

Functie omschrijving Ben jij een senior .NET developer en heb jij tevens ervaring als teamlead? Ben jij iemand met een helikopterview en denk jij graag mee met de klanten? Dan zijn wij op zoek naar jou! Voor een geweldig bedrijf zijn wij namelijk op zoek naar een ervaren .NET developer. Het bedrijf houdt zich bezig met het ontwerpen en bouwen van websites, portalen en applicaties voor met name zorg- en onderwijsinstellingen en overheidsinstanties. Jouw taken: Het fungeren als Lead Developer; Het meedenken met de business (dit vergt commercieel inzicht); Het begeleiden van diverse projecten (van klein tot groot); Het ontwerpen

Bekijk vacature »

.NET developer

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

App Developer

Samen werken aan een gezonder Nederland en toekomstbestendige zorg voor iedereen. Dat is de impact die jij kan hebben als App Developer bij VGZ. Wil jij een bijdrage leveren aan een maatschappij waarin iedereen zich thuis voelt? Bekijk dan de vacature. Uit onderzoek van Computable is VGZ verkozen tot ‘beste niet-ICT werkgever voor ICT’ers van Nederland’ Hoe ook jij het verschil maakt Als App developer werk jij aan het belangrijkste communicatiekanaal van VGZ, namelijk de App! Als App developer bij VGZ maak je onderdeel uit van een van onze App-teams. Met een goede mix van kennis en ervaring zet je

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

20/06/2025 15:52:09
 
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.