Responsive iframe in een WebDev pagina

De standard iframe control van WebDev is minder geschikt op een responsive pagina. Deze werkt alleen alleen horizontaal waardoor de beeldverhouding wordt verstoord. Dit kan worden opgelost door gebruik te maken van een HTML control.

Maak een HTML control aan op een responsive pagina. 

Ga nu naar de eigenschappen van de HTML control en klik op de knop "Edit HTML source code" en voeg vervolgens onderstaande code toe.

De control gedraagt zich nu zowel horizontaal als verticaal responsive.

DE CODE

<div class="container">

<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

</div>

<style>

.container {

position: relative;

overflow: hidden;

width: 100%;

padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}

.responsive-iframe {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 100%;

height: 100%;

}

</style>