Inleiding

Met een iFrame sluit je externe inhoud — zoals een boekingssysteem, kaart of webapplicatie — direct in op een pagina van je BCS Connect-omgeving. Toch ontstaan er regelmatig opmaakproblemen: een iFrame dat veel te groot wordt, buiten de pagina valt of niet meeschaalt op mobiel.

In dit artikel lees je hoe een iFrame werkt, waarom het misgaat als je percentages gebruikt voor hoogte en breedte, hoe je een iFrame correct insluit en wat je doet als deze niet wordt geladen.

Hoe werkt een iFrame?

Een iFrame is een HTML-element waarmee je een andere webpagina laadt binnen een gedeelte van je eigen pagina. Hij heeft een hoogte en een breedte nodig zodat de browser weet hoeveel ruimte hij moet reserveren.

Je kunt deze afmetingen op twee manieren opgeven:

• Pixels (vast formaat) — voor de hoogte (aanbevolen): bijvoorbeeld height="600px". De hoogte blijft hetzelfde, ongeacht het schermformaat, waardoor inhoud niet wordt afgesneden.
• Percentages (relatief formaat) — voor de breedte: bijvoorbeeld width="100%". De breedte past zich aan aan het omringende element, waardoor het iFrame netjes meeschaalt op desktop, tablet en mobiel.

Waarom gaat het mis met percentages boven de 100%?

De browser berekent percentages relatief ten opzichte van het omringende (oudere) element. Een waarde als height="500%" betekent letterlijk: maak het iFrame vijf keer zo hoog als de container. Het resultaat:

• Een iFrame dat veel groter wordt dan de pagina zelf.
• Onverwachte uitlijning en overlappende inhoud.
• Eindeloos scrollen of een kapotte weergave op mobiel.
• Verlies van responsiviteit.

Een iFrame correct insluiten

Volg deze stappen om een externe pagina netjes en responsief in te sluiten.

1. Open de pagina in BCS Connect waar je het iFrame wilt plaatsen en zet de editor in HTML-modus (broncode).

2. Plak op de gewenste plek de volgende code:

   <iframe
     src="https://voorbeeld.nl"
     width="100%"
     height="600px"
     style="border: none;"
     frameborder="0">
   </iframe>

3. Vervang https://voorbeeld.nl door de URL die je wilt insluiten.
4. Pas de hoogte aan op basis van de inhoud. 600px werkt goed als standaard, maar voor grotere applicaties kun je 800px of 1000px gebruiken.
5. Sla de pagina op en bekijk het resultaat in een incognitovenster om te controleren of alles netjes wordt geladen.

Wat doen deze attributen?

• width="100%": het iFrame past zich aan de breedte van het omringende element aan — ideaal voor responsieve weergave op desktop, tablet en mobiel.
• height="600px": een vaste hoogte zodat de ingesloten inhoud netjes wordt weergegeven, zonder onnodige witruimte of afgesneden delen.
• style="border: none;": verwijdert de standaardrand voor een schonere uitstraling.
• frameborder="0": een verouderd attribuut, maar zorgt ervoor dat ook oudere browsers geen rand tonen.

Geavanceerde aanpassingen

Wil je het iFrame nóg beter laten meeschalen of meer van de pagina laten vullen? Je kunt het gedrag finetunen met een paar extra CSS-instellingen.

• Media queries voor mobiel: gebruik CSS-media queries om op kleinere schermen een andere hoogte toe te passen, bijvoorbeeld height: 400px op smartphones.
• Volledige paginaweergave: gebruik height: 100vh in CSS — het iFrame is dan altijd even hoog als het zichtbare deel van het scherm.
• Verhouding behouden (16:9, 4:3): plaats het iFrame in een container met een padding-bottom in procenten om video-iFrames altijd in dezelfde verhouding weer te geven.

Problemen oplossen

Mijn iFrame is veel te groot of valt buiten de pagina

• Controleer of je voor de hoogte of breedte geen percentages boven de 100% gebruikt.
• Vervang de hoogte door een vaste pixelwaarde, bijvoorbeeld height="600px".
• Zet de breedte op width="100%" in plaats van een hogere waarde.

Het iFrame blijft leeg of wordt niet geladen

• Controleer de URL in het src-attribuut: gebruik altijd https://, geen http://.
• De externe website blokkeert mogelijk insluiten via X-Frame-Options of Content-Security-Policy. Open de URL in een nieuw tabblad: zie je een melding als "refused to connect", dan staat de eigenaar van de website inbedding niet toe.
• Vraag de eigenaar van de externe website om jouw BCS Connect-domein toe te voegen aan hun toegestane frame-ancestors.

Het iFrame wordt niet correct weergegeven op mobiel

• Gebruik width="100%" in plaats van een vaste pixelbreedte.
• Voeg een CSS-media query toe om op kleinere schermen een lagere hoogte te gebruiken.

Mijn probleem staat hier niet vermeld

Stuur een e-mail met een omschrijving van het probleem en de pagina-URL naar support.plek@bcs-hr.com. Een screenshot wordt op prijs gesteld.