Responsive Fullscreen Iframe

< zurück zur Übersicht

Iframe im Container mit Titelleiste für fullscreen

<div class="raetsel">
  <div class="fullscreen-header">
    <a class="link" href="#">< zurück zu Ihrer Webseite</a>
    <img class="logo" src="" alt="">
  </div>
  <div class='embed-container'>
    <iframe src='https://puzzle-by.krupion.de/public-demo/puzzle/#puzzle=monday&hideheader=True' allowfullscreen="true" style='border:0'></iframe>
  </div>
</div>

CSS für fullscreen Iframe auf Displays unter 960 Pixeln

:root {
  --header-height: 40px;
}
.fullscreen-header {
  height: var(--header-height, 0);
  background-color: #b2def0;
  text-decoration: none;
  justify-content: space-between;
  align-items: center;
  /* Do not display by default, only activated by media query. */
  display: none;
}
@media (max-width: 960px) {
  .raetsel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .embed-container {
    height: calc(100% - var(--header-height, 0));
  }
  .fullscreen-header {
    display: flex;
  }
}

CSS für Iframe Höhe und Breite auf Desktop

Bitte entnehmen sie das CSS aus der Anleitung für Responsive Iframe. Allerdings müssen Sie noch dafür sorgen, dass die Höhenregeln nicht bei Breite unter 960px angezeigt wird, damit diese nicht die fullsrceen Eigenschaften überschreiben.

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