Wake up to the sea

For web developers

Embedding the live camera

Paste this where the camera should appear. It fills the width of whatever it is placed in (a full-width section, a column, or a sidebar), and the small script resizes the iframe so the video and camera-view buttons always fit without scrollbars, on phones as well as desktops.

<!-- South Sands live camera -->
<iframe class="southsands-cam"
        src="https://webcams2.chestnutcorp.co.uk/southsands/embed.html"
        title="South Sands live beach camera"
        loading="lazy"
        allow="autoplay; fullscreen" allowfullscreen scrolling="no"
        style="display:block;width:100%;border:0;aspect-ratio:16/11"></iframe>

<script>
/* Sizes each South Sands camera iframe to its content. Include once per page. */
(function () {
  var frames = document.querySelectorAll('iframe.southsands-cam');
  function frameFor(win) {
    for (var i = 0; i < frames.length; i++) if (frames[i].contentWindow === win) return frames[i];
  }
  window.addEventListener('message', function (e) {
    var f = frameFor(e.source);
    if (!f || e.origin !== new URL(f.src, location.href).origin) return;
    if (e.data && e.data.type === 'southsands-cam:height') {
      f.style.aspectRatio = 'auto';
      f.style.height = e.data.height + 'px';
    }
  });
  frames.forEach(function (f) {
    f.addEventListener('load', function () {
      f.contentWindow.postMessage({ type: 'southsands-cam:ping' }, new URL(f.src, location.href).origin);
    });
  });
})();
</script>

1. HTTPS sites: if the website uses https://, the embed must be served over https:// too, or browsers will refuse to show it.
2. Without the script the iframe still works; it just keeps the starting 16:11 shape, which may leave a little space or a scrollbar under the camera views.
3. Sizing: to limit the width, put the iframe inside a container, for example <div style="max-width:800px">.