Responsive Link mit CSS

< zurück zur Übersicht

Iframe im Container und externer Link

<div class='embed-container' id="embed-container">
  <iframe src='' data-src="https://puzzle-by.krupion.de/public-demo/puzzle/#hideheader=true" data-minWidth="600px" allow="fullscreen" style='border:0' id="puzzle-frame"></iframe>
</div>
<div class="external-link" id="external-link">
  <a href="https://puzzle-by.krupion.de/public-demo/puzzle/" target="_blank">Rätsel in neuem Fenster öffnen</a>
</div>

CSS um zwischen Iframe und Link zu wechseln

.embed-container {
  display: none;
}
.external-link {
  display: block;
}
@media (min-width: 960px) {
  .embed-container {
    display: block;
  }
  .external-link {
    display: none;
  }
}

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

Bitte entnehmen sie das CSS aus der Anleitung für Responsive Iframe.

Rätsel in neuem Fenster öffnen