<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>
const iframe = document.getElementById('puzzle-frame');
const embedContainer = document.getElementById('embed-container');
const externalLink = document.getElementById('external-link');
const src = iframe.dataset.src;
const minWidth = iframe.dataset.minWidth;
if (window.matchMedia("(min-width: " + minWidth + ")").matches) {
iframe.setAttribute('src', src);
embedContainer.style.display = 'block';
externalLink.style.display = 'none'
} else {
embedContainer.style.display = 'none';
externalLink.style.display = 'block';
}
Bitte entnehmen sie das CSS aus der Anleitung für Responsive Iframe.