Embed Reference
Permanent Timepath integration fixture for compatibility testing.
Initial height 700px · waiting for the first height message
This is the code behind the example above, with this fixture's ID already in it.
<iframe
id="QyxP8VURtt4u8JS9KYGr"
width="100%"
height="700"
title="Timepath Voices"
src="https://embed.timepath.co/callout/QyxP8VURtt4u8JS9KYGr"
frameborder="0"
scrolling="no"
allow="encrypted-media; clipboard-read; clipboard-write; fullscreen"
loading="lazy"
></iframe>Complete on its own at a fixed height of 700px. Add the listener below to let the frame follow its content.
<script type="text/javascript">
(function () {
var FRAME_ORIGIN = "https://embed.timepath.co";
var FRAME_ID = "QyxP8VURtt4u8JS9KYGr";
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.type !== "timepath-resize" || d.id !== FRAME_ID) return;
var h = d.height;
if (typeof h === "number" && h > 0 && h < 100000) setHeight(h);
});
})();
</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.
Voices posts a different message shape from the other formats, so it needs its own listener rather than the shared helper.
QyxP8VURtt4u8JS9KYGrhttps://embed.timepath.co/callout/QyxP8VURtt4u8JS9KYGrThis is a permanent Timepath integration fixture maintained for compatibility testing. The page URL and the Timepath fixture ID are intended to remain stable.
Product news, newsroom stories and new formats — occasionally, never spam.