Embed Reference

Collection — 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 650px · 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="bv2IiaqweEsZLKNg5c2h"
  width="100%"
  height="650"
  title="Timepath Collection"
  src="https://embed.timepath.co/widget/bv2IiaqweEsZLKNg5c2h"
  frameborder="0"
  scrolling="no"
  allow="encrypted-media; clipboard-read; clipboard-write; fullscreen"
  loading="lazy"
></iframe>

Complete on its own at a fixed height of 650px. 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 = "bv2IiaqweEsZLKNg5c2h";
  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.widgetId !== 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, widgetId: 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 — Collection
Workspace
Timepath Integration Fixtures
Purpose
Compatibility and CMS integration testing
Stability
Permanent reference fixture
Timepath content ID
bv2IiaqweEsZLKNg5c2h
Reader URL
https://embed.timepath.co/widget/bv2IiaqweEsZLKNg5c2h

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 650px you set and the content scrolls inside it.
  • Selecting an item opens its target in a new browsing context.

Subscribe for updates

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