Embed Reference

Liveblog — iFrame

Permanent Timepath integration fixture for compatibility testing.

Production supportedTimepath hosts and renders the experience in its own browsing context.
iFrameScript

Live example

Initial height 1000px · waiting for the first height message

Embed code

This is the code behind the example above, with this fixture's ID already in it.

Minimal iframe
<iframe
  id="vkTHn4FSfNbB3fxYh3qJ"
  width="100%"
  height="1000"
  title="Timepath Liveblog"
  src="https://embed.timepath.co/liveblog/vkTHn4FSfNbB3fxYh3qJ"
  frameborder="0"
  scrolling="no"
  allow="encrypted-media; clipboard-read; clipboard-write; fullscreen"
  loading="lazy"
></iframe>

Complete on its own at a fixed height of 1000px. Add the listener below to let the frame follow its content.

Recommended: auto-height listener
<script type="text/javascript">
(function () {
  var FRAME_ORIGIN = "https://embed.timepath.co";
  var FRAME_ID = "vkTHn4FSfNbB3fxYh3qJ";
  var el = document.getElementById(FRAME_ID);
  if (!el) return;

  var raf = null;
  function setHeight(px) {
    if (raf) return;
    raf = requestAnimationFrame(function () {
      el.style.height = String(px) + "px";
      raf = null;
    });
  }

  window.addEventListener("message", function (e) {
    if (!e || e.origin !== FRAME_ORIGIN) return;
    var d = e.data && typeof e.data === "object" ? e.data : null;
    if (!d || d.liveblogId !== FRAME_ID) return;
    var h = d.frameHeight;
    if (typeof h === "number" && h > 0 && h < 100000) setHeight(h);
  });

  el.addEventListener("load", function () {
    try {
      el.contentWindow && el.contentWindow.postMessage(
        { parentUrl: window.location.href, liveblogId: FRAME_ID, v: "2.0" },
        FRAME_ORIGIN
      );
    } catch (err) {}
  }, { once: true });
})();
</script>

Paste after the iframe. It requires the iframe's id attribute to equal the content id, which is what scopes it to its own frame when a page carries more than one embed.

The embed posts its rendered height to the parent window as content changes. The official resize helper below grows the iframe to match.

Fixture

Fixture
Integration Fixture — Liveblog
Workspace
Timepath Integration Fixtures
Purpose
Compatibility and CMS integration testing
Stability
Permanent reference fixture
Timepath content ID
vkTHn4FSfNbB3fxYh3qJ
Reader URL
https://embed.timepath.co/liveblog/vkTHn4FSfNbB3fxYh3qJ

This is a permanent Timepath integration fixture maintained for compatibility testing. The page URL and the Timepath fixture ID are intended to remain stable.

Expected behaviour

  • The experience renders without a login — these pages are public and anonymous.
  • Width fills the container. The layout is fluid; set the width on your own wrapper.
  • Media and images load from Timepath's CDN, including on a phone viewport.
  • Height follows the content once the listener is in place. Without it the frame stays at the 1000px you set and the content scrolls inside it.
  • New posts arrive without a page reload; the embed polls for updates.
  • Loading more updates extends the list in place.

Subscribe for updates

Product news, newsroom stories and new formats — occasionally, never spam.