Iframe responsive maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Developer

Functie omschrijving Jij gaat in de functie van Software Developer werken met C# en .NET framework. Jij gaat maatwerk software ontwikkelen en softwareoplossingen creëren. Daarnaast optimaliseer je de bestaande software. Oplossingen waar de klant echt iets aan heeft, jij krijgt er energie van op dit te realiseren. Je gaat werken in een Microsoft omgeving(ASP.NET) en gebruikt daarnaast C# en MVC. Samen met het huidige IT team binnen deze organisatie verwerk je de wensen van de klant tot een (eind)product. Bedrijfsprofiel Je komt te werken in een klein team van developers, die zich voornamelijk bezighouden met back-end development. Verder staat dit

Bekijk vacature »

Junior PHP Developer

Dit ga je doen Software development met behulp van C# .NET en / of PHP, je mag zelf kiezen waar jij je in wil specialiseren Meedenken over het nieuwe pakket, waar moet het aan voldoen? Unit-, integratie- en diverse andere tests schrijven en uitvoeren Nauw samenwerken met je IT collega's zoals Testers, Developers, DevOps Specialisten en Architecten Jezelf ontwikkelen met behulp van trainingen en cursussen Hier ga je werken Onze klant, een grote speler in de medische sector, is op zoek naar een enthousiaste junior (of meer ervaren) Software Developer die klaar is voor een nieuwe stap in zijn of

Bekijk vacature »

.NET developer

Functie Als .NET developer werk jij samen in een multidisciplinair ontwikkel team met 1-2 Senior .NET developers, twee front-end developers, Data Scientists en één UX designer. Als team werken jullie aan het ontwikkelen van een Cloud based applicatie en aan het stabieler maken van deze applicatie. Ook unit testing gaat erg belangrijk worden in jouw nieuwe functie. Samen met de Senior .NET ontwikkelaar wordt jij verantwoordelijk voor het ontwikkelen van de API. Jullie werken met veel data en incidenteel komen er ook data vraagstukken en zullen er wat queries gedraaid moeten worden. Dit betekend dat jij veel gaat werken met

Bekijk vacature »

Full Stack .NET Developer C# ASP.NET

Samengevat: Deze werkgever is gespecialiseerd in het op afstand bewaken en besturen van machines en processen. Ben jij een ervaren Full Stack .NET Developer? Heb je ervaring met C# en ASP.NET? Vaste baan: .Net Developer C# ASP.NET HBO €3.300 - €4.500 Deze werkgever is een snel groeiende onderneming gespecialiseerd in het op afstand bewaken en besturen van machines en processen, IoT (Internet of Things). Deze werkgever is een veelzijdige organisatie. Je werkt voor de eigen IT organisatie. Zij werken met moderne technologie en staan open voor innovatie. Wil jij bij de top specialisten horen? Ben jij op zoek naar een

Bekijk vacature »

Back end developer PHP

Functie Met een complex en uitgebreid e-commerce platform, een eigen PIM-systeem en eigen scan applicatie – krijg jij dagelijks te zien hoe jouw werk gebruikt wordt door miljoenen gebruikers. En we staan qua development pas in de startblokken, aangezien er nog meerdere projecten op de plank liggen te wachten! Ons huidige development team bestaat uit 8 programmeurs. Er wordt dagelijks gereflecteerd op geschreven code, Scrum taken en kennisdelen onderling is een must. Onze voertaal binnen ons team is Engels, dit omdat wij twee internationale collega’s hebben. Ons huidige “IT Landschap” bestaat voornamelijk uit allerlei losse onderdelen die individueel, maar ook

Bekijk vacature »

Java developer (remote)

Functie Wat ga je doen als Java Developer? Jij als Java ontwikkelaar komt te werken in 1 van onze SCRUM teams. Momenteel werken er zo’n 30 ontwikkelaars binnen onze organisatie waarbij jij de brug slaat tussen het bouwen van verschillende functionaliteiten binnen onze applicaties en deze vervolgens te integreren in onze centrale hub. Je start je dag om 9 uur met een stand up en dan pak je jouw taken op voor de dag. Hieronder een aantal taken die jij zal uitvoeren: – Het bedenken en uitbouwen van features binnen de verschillende applicaties – Onderhouden van CI/CD pipelines – Bezighouden

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Front end developer binnen de consultancy

Functie Je komt in een team met ambitieuze developers die de passie voor Front-End met jou delen. Samen ga je aan de slag met leuke en leerzame opdrachten. Het team heeft een eigen budget en financiën en zij bepalen zelf hoe dat besteed en investeert wordt. Je gebruikt tools als JavaScript, Node.js, React, Angular, Typescript en Vue.js wanneer je werkt aan de opdrachten. Daarnaast zul je veel leren van je collega’s en gezamenlijk een leuke tijd doorbrengen tijdens activiteiten zoals wintersport, hackatons en conferentiebezoeken. Je krijgt niet alleen de mogelijkheid Front-End te ontwikkelen, maar ook vooral jezelf. Dit kan behaald

Bekijk vacature »

Junior .NET Developer

Dit ga je doen Als junior .NET Developer lever je met jouw oplossingen direct een bijdrage aan de bedrijfsprocessen van de klanten. Werkzaamheden waar jij je zoal mee bezig houdt zijn; Het ontwikkelen, onderhouden en optimaliseren van de draaiende platforms van de klanten; Softwareontwikkeling middels C#, .NET; Klantcontact om de wensen te bespreken en uit te werken; Optimaliseren van de (huidige) bedrijfsprocessen; De IT-afdeling bestaat uit 30 personen verdeeld over 3 teams. Het team waar je in terecht komt bestaat uit ongeveer tien man. Het is een team wat bestaat uit betrokken collega’s, waar iedereen bereidt is om elkaar te

Bekijk vacature »

Junior/Medior Front-end developer

Functie Als Front-end developer werk je intensief samen met 1 van de UX-designers en denk je mee over de gebruiksvriendelijkheid en design van onze web- en mobile apps. Je bent betrokken bij sessies met gebruikers om designs te valideren en usability van de app-in-wording te testen. Vervolgens gebruik je dit om samen met je team waarin ook back-end (.NET) developers zitten, te zorgen voor de realisatie van de best mogelijke apps voor studenten en docenten. Eisen • Je hebt een hands-on development en coding mind-set en werkt graag aan een high quality code base welke je consequent onderhouden kan worden

Bekijk vacature »

Front-end PHP Developer

Dit ga je doen Bouwen van de frontend van een nieuwe applicaties; Verbeteren van de user experience; Opstellen van een style guide; Schakelen met collega developers over de te bouwen oplossing; Je speelt een belangrijke rol in het neerzetten van het nieuwe systeem; Werken met o.a. Symfony 6, API Platform, Twig, Javascript, Redis Automatiseren van processen; Koppelen van verschillende functionaliteiten; Unit tests, integration tests, end-to-end tests; In de toekomst ga je nog werken aan andere projecten. Hier ga je werken Voor onze vaste opdrachtgever in de regio Breda zijn wij op zoek naar een Frontend Developer. Het betreft een organisatie

Bekijk vacature »

Front end developer

Functie Binnen de functie van Front-end developer werk je mee aan uitdagende klantprojecten. In teamverband werk je aan de voorkant van onze state-of-the-art portaal oplossingen en apps. Dit alles gebeurt in een multidisciplinaire omgeving waarbij je de ruimte hebt om te sparren, je ideeën scherp te stellen, en waar je met de benodigde kennis en ervaring om je heen altijd terecht kunt bij je collega’s voor vragen en ondersteuning. Meestal werk je vanuit ons kantoor maar we bieden ook alle faciliteiten om thuis te kunnen werken. Voor sommige projecten ga je mee naar de klant, wellicht zelfs in het buitenland!

Bekijk vacature »

Traineeship ICT regio Amsterdam/Utrecht

Wat ga je doen? Het traineeship begint met een fulltime maand cursussen en praktijkdagen, waarin je de basis van het IT-vak leert op de Shared Servicedesk (SSD). Daarnaast ga je meteen aan de slag voor je eerste certificering! (ITILv4). Je start in een groep met 4 tot 10 deelnemers, waarmee jij gedurende die maand optrekt en je kennis kunt delen. Na het voltooien van de eerste maand ga je direct voor een langere periode aan de slag bij één van onze klanten of blijf je intern bij ons op de Shared Servicedesk. Je bent het eerste aanspreekpunt van de eindgebruikers

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Magento2 Developer

Functie Ben jij een ontwikkelaar en wil jij een volgende stap zetten en als teamlead aan de slag? Lees dan snel verder! Voor een gewilde opdrachtgever in omgeving Delft zijn wij op zoek naar een programmeur die als meewerkend voorman aan de slag wilt gaan. Een developer die een team van twee man aan zal sturen. Jouw werkzaamheden zullen er als volgt uitzien; Ontwikkelen en ontwerpen van API's; Maatwerkoplossingen; Databeveiliging; Optimalisatie webshops; Ontwikkelen technische implementaties voor verbetering database; Aanspreekpunt voor de organisatie en verantwoordelijk voor de aansturing van externe developers. Zoek je veel uitdaging en veelzijdigheid in je werk dan

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

28/03/2024 15:49:33
 
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.