Responsive Iframe

< zurück zur Übersicht

Iframe im Container

<div class='embed-container'>
  <iframe src='https://puzzle-by.krupion.de/public-demo/puzzle/#hideheader=true' allowfullscreen="true" style='border:0'></iframe>
</div>

CSS für Iframe mit fluider Breite unter 960 Pixeln

.embed-container {
  position: relative;
  height: 400px;
  width: 960px;
  overflow: hidden;
  max-width: 100%;
  margin: auto;
}

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

CSS für Iframe Höhe an Viewport Höhe anpassen

In der variable --header-height können Sie die Höhe eines position:fixed; Headers angeben um diese von der Iframe-Höhe abzuziehen.

:root {
  --header-height: 0px;
}

@media (min-height: 510px) {
  .embed-container {
    height: calc(500px - var(--header-height, 0));
  }
}

@media (min-height: 610px) {
  .embed-container {
    height: calc(600px - var(--header-height, 0));
  }
}

@media (min-height: 710px) {
  .embed-container {
    height: calc(700px - var(--header-height, 0));
  }
}

@media (min-height: 810px) {
  .embed-container {
    height: calc(800px - var(--header-height, 0));
  }
}

@media (min-height: 910px) {
  .embed-container {
    height: calc(900px - var(--header-height, 0));
  }
}

/* Max height */
@media (min-height: 1010px) {
  .embed-container {
    height: calc(1000px - var(--header-height, 0));
  }
}