Responsive Link mit JavaScript

<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';
}