Responsive iFrame
Om het iframe responsive te embedden plaats je het iframe in een div met de class “.iframe-container” en gebruik je onderstaande CSS. De hoogte van het iframe verschilt per fotosite. Pas daarom per breekpunt de hoogte aan met “padding-bottom” zoals in het voorbeeld te zien is:


.iframe-container {
position: relative;
padding-bottom: 310%;
padding-top: 35px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch;
}

.iframe-container iframe {
position: absolute;
top:0;
left: 0;
min-width: 100%;
width: 100px;
*width: 100%;
height: 100%;
}

@media(min-width: 992px){
.iframe-container {
padding-bottom: 430%;
}
}

@media(min-width: 768px){
.iframe-container {
padding-bottom: 370%;
}
}

@media(max-width: 320px){
.iframe-container {
padding-bottom: 430%;
}
}