Files
2026-10-07 20:48:58 +00:00

1301 lines
56 KiB
HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="prev" href="../">
<link rel="next" href="cors-settings/">
<link rel="icon" href="../assets/brand/favicon.svg">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.7">
<title>Embedding ReplayWeb.page - Replay Webpage Docs</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.ec1eaa64.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.ab4e12ef.min.css">
<style>:root{--md-admonition-icon--note:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-pencil-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M12.854.146a.5.5%200%200%200-.707%200L10.5%201.793%2014.207%205.5l1.647-1.646a.5.5%200%200%200%200-.708l-3-3zm.646%206.061L9.793%202.5%203.293%209H3.5a.5.5%200%200%201%20.5.5v.5h.5a.5.5%200%200%201%20.5.5v.5h.5a.5.5%200%200%201%20.5.5v.5h.5a.5.5%200%200%201%20.5.5v.207l6.5-6.5zm-7.468%207.468A.5.5%200%200%201%206%2013.5V13h-.5a.5.5%200%200%201-.5-.5V12h-.5a.5.5%200%200%201-.5-.5V11h-.5a.5.5%200%200%201-.5-.5V10h-.5a.499.499%200%200%201-.175-.032l-.179.178a.5.5%200%200%200-.11.168l-2%205a.5.5%200%200%200%20.65.65l5-2a.5.5%200%200%200%20.168-.11l.178-.178z%22/%3E%3C/svg%3E');--md-admonition-icon--abstract:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-file-earmark-text-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M9.293%200H4a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h8a2%202%200%200%200%202-2V4.707A1%201%200%200%200%2013.707%204L10%20.293A1%201%200%200%200%209.293%200zM9.5%203.5v-2l3%203h-2a1%201%200%200%201-1-1zM4.5%209a.5.5%200%200%201%200-1h7a.5.5%200%200%201%200%201h-7zM4%2010.5a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5zm.5%202.5a.5.5%200%200%201%200-1h4a.5.5%200%200%201%200%201h-4z%22/%3E%3C/svg%3E');--md-admonition-icon--info:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-info-circle-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M8%2016A8%208%200%201%200%208%200a8%208%200%200%200%200%2016zm.93-9.412-1%204.705c-.07.34.029.533.304.533.194%200%20.487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703%200-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381%202.29-.287zM8%205.5a1%201%200%201%201%200-2%201%201%200%200%201%200%202z%22/%3E%3C/svg%3E');--md-admonition-icon--tip:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-exclamation-circle-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200zM8%204a.905.905%200%200%200-.9.995l.35%203.507a.552.552%200%200%200%201.1%200l.35-3.507A.905.905%200%200%200%208%204zm.002%206a1%201%200%201%200%200%202%201%201%200%200%200%200-2z%22/%3E%3C/svg%3E');--md-admonition-icon--success:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-check-circle-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200zm-3.97-3.03a.75.75%200%200%200-1.08.022L7.477%209.417%205.384%207.323a.75.75%200%200%200-1.06%201.06L6.97%2011.03a.75.75%200%200%200%201.079-.02l3.992-4.99a.75.75%200%200%200-.01-1.05z%22/%3E%3C/svg%3E');--md-admonition-icon--question:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-question-circle-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M16%208A8%208%200%201%201%200%208a8%208%200%200%201%2016%200zM5.496%206.033h.825c.138%200%20.248-.113.266-.25.09-.656.54-1.134%201.342-1.134.686%200%201.314.343%201.314%201.168%200%20.635-.374.927-.965%201.371-.673.489-1.206%201.06-1.168%201.987l.003.217a.25.25%200%200%200%20.25.246h.811a.25.25%200%200%200%20.25-.25v-.105c0-.718.273-.927%201.01-1.486.609-.463%201.244-.977%201.244-2.056%200-1.511-1.276-2.241-2.673-2.241-1.267%200-2.655.59-2.75%202.286a.237.237%200%200%200%20.241.247zm2.325%206.443c.61%200%201.029-.394%201.029-.927%200-.552-.42-.94-1.029-.94-.584%200-1.009.388-1.009.94%200%20.533.425.927%201.01.927z%22/%3E%3C/svg%3E');--md-admonition-icon--warning:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-exclamation-triangle-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M8.982%201.566a1.13%201.13%200%200%200-1.96%200L.165%2013.233c-.457.778.091%201.767.98%201.767h13.713c.889%200%201.438-.99.98-1.767L8.982%201.566zM8%205c.535%200%20.954.462.9.995l-.35%203.507a.552.552%200%200%201-1.1%200L7.1%205.995A.905.905%200%200%201%208%205zm.002%206a1%201%200%201%201%200%202%201%201%200%200%201%200-2z%22/%3E%3C/svg%3E');--md-admonition-icon--failure:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-x-octagon-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M11.46.146A.5.5%200%200%200%2011.107%200H4.893a.5.5%200%200%200-.353.146L.146%204.54A.5.5%200%200%200%200%204.893v6.214a.5.5%200%200%200%20.146.353l4.394%204.394a.5.5%200%200%200%20.353.146h6.214a.5.5%200%200%200%20.353-.146l4.394-4.394a.5.5%200%200%200%20.146-.353V4.893a.5.5%200%200%200-.146-.353L11.46.146zm-6.106%204.5L8%207.293l2.646-2.647a.5.5%200%200%201%20.708.708L8.707%208l2.647%202.646a.5.5%200%200%201-.708.708L8%208.707l-2.646%202.647a.5.5%200%200%201-.708-.708L7.293%208%204.646%205.354a.5.5%200%201%201%20.708-.708z%22/%3E%3C/svg%3E');--md-admonition-icon--danger:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-exclamation-diamond-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M9.05.435c-.58-.58-1.52-.58-2.1%200L.436%206.95c-.58.58-.58%201.519%200%202.098l6.516%206.516c.58.58%201.519.58%202.098%200l6.516-6.516c.58-.58.58-1.519%200-2.098L9.05.435zM8%204c.535%200%20.954.462.9.995l-.35%203.507a.552.552%200%200%201-1.1%200L7.1%204.995A.905.905%200%200%201%208%204zm.002%206a1%201%200%201%201%200%202%201%201%200%200%201%200-2z%22/%3E%3C/svg%3E');--md-admonition-icon--bug:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-bug-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M4.978.855a.5.5%200%201%200-.956.29l.41%201.352A4.985%204.985%200%200%200%203%206h10a4.985%204.985%200%200%200-1.432-3.503l.41-1.352a.5.5%200%201%200-.956-.29l-.291.956A4.978%204.978%200%200%200%208%201a4.979%204.979%200%200%200-2.731.811l-.29-.956z%22/%3E%20%20%3Cpath%20d%3D%22M13%206v1H8.5v8.975A5%205%200%200%200%2013%2011h.5a.5.5%200%200%201%20.5.5v.5a.5.5%200%201%200%201%200v-.5a1.5%201.5%200%200%200-1.5-1.5H13V9h1.5a.5.5%200%200%200%200-1H13V7h.5A1.5%201.5%200%200%200%2015%205.5V5a.5.5%200%200%200-1%200v.5a.5.5%200%200%201-.5.5H13zm-5.5%209.975V7H3V6h-.5a.5.5%200%200%201-.5-.5V5a.5.5%200%200%200-1%200v.5A1.5%201.5%200%200%200%202.5%207H3v1H1.5a.5.5%200%200%200%200%201H3v1h-.5A1.5%201.5%200%200%200%201%2011.5v.5a.5.5%200%201%200%201%200v-.5a.5.5%200%200%201%20.5-.5H3a5%205%200%200%200%204.5%204.975z%22/%3E%3C/svg%3E');--md-admonition-icon--example:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-mortarboard-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M8.211%202.047a.5.5%200%200%200-.422%200l-7.5%203.5a.5.5%200%200%200%20.025.917l7.5%203a.5.5%200%200%200%20.372%200L14%207.14V13a1%201%200%200%200-1%201v2h3v-2a1%201%200%200%200-1-1V6.739l.686-.275a.5.5%200%200%200%20.025-.917l-7.5-3.5Z%22/%3E%20%20%3Cpath%20d%3D%22M4.176%209.032a.5.5%200%200%200-.656.327l-.5%201.7a.5.5%200%200%200%20.294.605l4.5%201.8a.5.5%200%200%200%20.372%200l4.5-1.8a.5.5%200%200%200%20.294-.605l-.5-1.7a.5.5%200%200%200-.656-.327L8%2010.466%204.176%209.032Z%22/%3E%3C/svg%3E');--md-admonition-icon--quote:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-quote%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M12%2012a1%201%200%200%200%201-1V8.558a1%201%200%200%200-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579%200-1.085.124-1.52.372a3.322%203.322%200%200%200-1.085.992%204.92%204.92%200%200%200-.62%201.458A7.712%207.712%200%200%200%209%207.558V11a1%201%200%200%200%201%201h2Zm-6%200a1%201%200%200%200%201-1V8.558a1%201%200%200%200-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579%200-1.085.124-1.52.372a3.322%203.322%200%200%200-1.085.992%204.92%204.92%200%200%200-.62%201.458A7.712%207.712%200%200%200%203%207.558V11a1%201%200%200%200%201%201h2Z%22/%3E%3C/svg%3E');}</style>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="webrecorder" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#embedding-replaywebpage" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="Replay Webpage Docs" class="md-header__button md-logo" aria-label="Replay Webpage Docs" data-md-component="logo">
<img src="../assets/brand/replaywebpage-icon-white.svg" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Replay Webpage Docs
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Embedding ReplayWeb.page
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/webrecorder/replayweb.page" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</div>
<div class="md-source__repository">
ReplayWeb.page
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../" class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="./" class="md-tabs__link">
Embedding
</a>
</li>
<li class="md-tabs__item">
<a href="../user-guide/" class="md-tabs__link">
User Guide
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="Replay Webpage Docs" class="md-nav__button md-logo" aria-label="Replay Webpage Docs" data-md-component="logo">
<img src="../assets/brand/replaywebpage-icon-white.svg" alt="logo">
</a>
Replay Webpage Docs
</label>
<div class="md-nav__source">
<a href="https://github.com/webrecorder/replayweb.page" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</div>
<div class="md-source__repository">
ReplayWeb.page
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../" class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<div class="md-nav__link md-nav__container">
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Embedding
</span>
</a>
<label class="md-nav__link md-nav__link--active" for="__nav_2" id="__nav_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Embedding
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="cors-settings/" class="md-nav__link">
<span class="md-ellipsis">
Configuring CORS
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<div class="md-nav__link md-nav__container">
<a href="../user-guide/" class="md-nav__link ">
<span class="md-ellipsis">
User Guide
</span>
</a>
<label class="md-nav__link " for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
User Guide
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../user-guide/loading/" class="md-nav__link">
<span class="md-ellipsis">
Loading Archived Items
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/locations/" class="md-nav__link">
<span class="md-ellipsis">
Supported Location URLs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/exploring/" class="md-nav__link">
<span class="md-ellipsis">
Exploring Archived Content
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/sharing/" class="md-nav__link">
<span class="md-ellipsis">
Sharing Archived Items
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/offline-use/" class="md-nav__link">
<span class="md-ellipsis">
Offline Use
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#introduction" class="md-nav__link">
<span class="md-ellipsis">
Introduction
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#example" class="md-nav__link">
<span class="md-ellipsis">
Example
</span>
</a>
<nav class="md-nav" aria-label="Example">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#loading-the-replaywebpage-ui-frontend" class="md-nav__link">
<span class="md-ellipsis">
Loading the ReplayWeb.page UI (Frontend)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#loading-the-service-worker-backend" class="md-nav__link">
<span class="md-ellipsis">
Loading the Service Worker (Backend)
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#self-hosting" class="md-nav__link">
<span class="md-ellipsis">
Self Hosting
</span>
</a>
<nav class="md-nav" aria-label="Self Hosting">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#example_1" class="md-nav__link">
<span class="md-ellipsis">
Example
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#embed-modes" class="md-nav__link">
<span class="md-ellipsis">
Embed Modes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#embedding-options" class="md-nav__link">
<span class="md-ellipsis">
Embedding Options
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#further-examples" class="md-nav__link">
<span class="md-ellipsis">
Further Examples
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#common-issues" class="md-nav__link">
<span class="md-ellipsis">
Common Issues
</span>
</a>
<nav class="md-nav" aria-label="Common Issues">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#embed-is-too-small-doesnt-fill-page" class="md-nav__link">
<span class="md-ellipsis">
Embed is too small / doesn't fill page.
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#loading-errors" class="md-nav__link">
<span class="md-ellipsis">
Loading Errors
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/webrecorder/replayweb.page/edit/main/mkdocs/site/docs/embedding/index.md" title="Edit this page" class="md-content__button md-icon" rel="edit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
</svg>
</a>
<h1 id="embedding-replaywebpage">Embedding ReplayWeb.page<a class="headerlink" href="#embedding-replaywebpage" title="Permanent link">&para;</a></h1>
<h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">&para;</a></h2>
<p>A key goal of ReplayWeb.page is to make embedding archived web content into other sites as easy as embedding other media like images and PDFs.</p>
<p>To make this possible ReplayWeb.page provides the <code class="highlight"><span class="p">&lt;</span><span class="nt">replay-web-page</span><span class="p">&gt;</span></code> HTML <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">web component</a> to support embedding in the pages where you would like to display web archives. This component works in all modern browsers, and has several configuration options that allow for control over the initial URL or snapshot to display from the archive when the component loads. The component can load WACZ files, WARC files and <a href="../user-guide/#supported-formats">other formats</a>.</p>
<p>The <code class="highlight"><span class="p">&lt;</span><span class="nt">replay-web-page</span><span class="p">&gt;</span></code> web component consists of a "backend" service worker, which emulates a web server, and a "frontend" UI, though in reality both are scripts running in the browser - there is no web server!</p>
<div class="admonition tip">
<p class="admonition-title">Tip: Serving web archives efficiently with WACZ files</p>
<p>While other web archive filetypes may require ReplayWeb.page to download them in their entirety before viewing, WACZ files allow the service worker to pull individual resources from the file as they are requested by the user. Full retrieval of the WACZ by ReplayWeb.page is <em>not</em> required as long as the server delivering the WACZ file supports HTTP range requests. This means that serving archived content from WACZ files is effectively as bandwidth efficient as any other web content!</p>
</div>
<h2 id="example">Example<a class="headerlink" href="#example" title="Permanent link">&para;</a></h2>
<h3 id="loading-the-replaywebpage-ui-frontend">Loading the ReplayWeb.page UI (Frontend)<a class="headerlink" href="#loading-the-replaywebpage-ui-frontend" title="Permanent link">&para;</a></h3>
<p>To embed a WACZ stored at <code>https://replayweb.page/docs/examples/tweet-example.wacz</code>, add the following <code class="highlight"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span></code> tag to your HTML page to load the user interface from the jsDelivr CDN, and use the <code class="highlight"><span class="p">&lt;</span><span class="nt">replay-web-page</span><span class="p">&gt;</span></code> component to point to the WACZ:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/replaywebpage@2.5.3/ui.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a>
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="p">&lt;</span><span class="nt">replay-web-page</span> <span class="na">source</span><span class="o">=</span><span class="s">"https://replayweb.page/docs/examples/tweet-example.wacz"</span>
<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="na">url</span><span class="o">=</span><span class="s">"https://oembed.link/https://twitter.com/webrecorder_io/status/1565881026215219200"</span><span class="p">&gt;&lt;/</span><span class="nt">replay-web-page</span><span class="p">&gt;</span>
</code></pre></div>
<p>In this example, the <code>source</code> attribute is pointing to the location of the WACZ file (in this case published on AWS S3) and the <code>url</code> attribute is used to indicate what URL to display from the archived item after the component loads.</p>
<h3 id="loading-the-service-worker-backend">Loading the Service Worker (Backend)<a class="headerlink" href="#loading-the-service-worker-backend" title="Permanent link">&para;</a></h3>
<p>ReplayWeb.page's backend is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">service worker</a> which intercepts requests for URLs and looks for them in your loaded archived item. Service workers are just JavaScript files and can be loaded from the CDN (Content Delivery Network), it is necessary to add a service worker path from where the web archive will be served to a local path. We use <code>/replay</code> in these examples, but it can be anything.
Since the service worker takes over the rendering of this path, it should be a path that is otherwise non-existent (serves a 404) from the actual web server.</p>
<p>To do this, create a <code>/replay</code> subdirectory and in it, a new JavaScript file (<code>/replay/sw.js</code>) and copy the following to the file:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="nx">importScripts</span><span class="p">(</span><span class="s2">"https://cdn.jsdelivr.net/npm/replaywebpage@2.5.3/sw.js"</span><span class="p">);</span>
</code></pre></div>
<p>If the HTML above was added to <code>https://example.com/path/my-web-archive-embed.html</code>
then the <code>sw.js</code> should be added such that it is at: <code>https://example.com/path/replay/sw.js</code>.</p>
<p>This has the affect imports the actual server worker from the CDN, serving it on your site <code>https://example.com/replay/sw.js</code> and
allowing it to render web archives on the <code>/replay/</code> path.</p>
<p>That's it! Loading <code>https://example.com/path/my-web-archive-embed.html</code> should now load the web archive.</p>
<p>Be sure to add width and height styles to the <code class="highlight"><span class="p">&lt;</span><span class="nt">replay-web-page</span><span class="p">&gt;</span></code> tag as needed to scale the embed, and replace <code>https://replayweb.page/docs/examples/example.wacz</code> with any web archive hosted on your site.</p>
<details class="info">
<summary>Info: Loading files from different servers</summary>
<p>If the file is loaded from a different origin, your site must have Cross Origin Resource Sharing (CORS) access to download the web archive.
<br>See <a href="#loading-errors">Loading Errors</a> below for more info.</p>
</details>
<details class="tip">
<summary>Best Practice: Controlling ReplayWeb.page versions</summary>
<p>The above example uses the version number "2.5.3" in paths to load a specific version of ReplayWeb.page from a CDN. These URLs point to a specific version of ReplayWeb.page software released on NPM, meaning that your replay viewer should stay stable, even if ReplayWeb.page is updated.</p>
<ul>
<li><code>https://cdn.jsdelivr.net/npm/replaywebpage@2.5.3/ui.js</code></li>
<li><code>https://cdn.jsdelivr.net/npm/replaywebpage@2.5.3/sw.js</code></li>
</ul>
<p>Although ReplayWeb.page strives to remain backwards compatible, this addresses any potential issue of older embeds breaking when the replay system is updated.</p>
<p>You can also use the latest stable release by omitting the version, and the URL will automatically load the latest published release:</p>
<ul>
<li><code>https://cdn.jsdelivr.net/npm/replaywebpage/ui.js</code></li>
<li><code>https://cdn.jsdelivr.net/npm/replaywebpage/sw.js</code></li>
</ul>
<p>This is not recommended for production use as this is more likely to break in case there is a breaking change.</p>
<p>For testing the very latest, it is possible to simply link to replayweb.page itself, eg. <code>https://replayweb.page/ui.js</code>
and <code>https://replayweb.page/sw.js</code> but these are updated the most frequently and more likely to break.</p>
<p>For production use, it is recommended to use a fixed version and explicitly upgrade as necessary.</p>
</details>
<h2 id="self-hosting">Self Hosting<a class="headerlink" href="#self-hosting" title="Permanent link">&para;</a></h2>
<p>Sometimes it can be desirable to self-host the user interface, service worker, and WACZ files. This is useful for preventing tracking by CDNs, or to make it easier to host the content in one place without needing to work out the details of Cross Origin Resource Sharing (CORS). </p>
<p>Following the same steps above, instead of loading the JavaScript and WACZ file from external locations, <a href="https://www.jsdelivr.com/package/npm/replaywebpage">download</a> the <code>ui.js</code> and <code>sw.js</code> JavaScript files and put them on the same server as the HTML that you are publishing. Link them accordingly replacing the CDN links in the guide above.</p>
<h3 id="example_1">Example<a class="headerlink" href="#example_1" title="Permanent link">&para;</a></h3>
<p>If you are publishing a page at <code>https://example.com/path/my-web-archive-embed.html</code>, adjust the <code class="highlight"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span></code> element to load the ui from a location on your website:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"ui.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a>
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="p">&lt;</span><span class="nt">replay-web-page</span> <span class="na">source</span><span class="o">=</span><span class="s">"example.wacz"</span> <span class="na">url</span><span class="o">=</span><span class="s">"https://webrecorder.net"</span><span class="p">&gt;&lt;/</span><span class="nt">replay-web-page</span><span class="p">&gt;</span>
</code></pre></div>
<p>The following URLs would then need to resolve correctly:</p>
<ul>
<li>https://example.com/path/my-web-archive-embed.html</li>
<li>https://example.com/path/example.wacz</li>
<li>https://example.com/path/ui.js</li>
<li>https://example.com/path/replay/sw.js</li>
</ul>
<p>When embedding more than one web archive on your site it can be helpful to centralize the location of the frontend and backend JavaScript, and potentially WACZ files. The <code class="highlight"><span class="p">&lt;</span><span class="nt">replay-web-page</span><span class="p">&gt;</span></code> component has a <code>replayBase</code> attribute that lets you define the location to load the <code>sw.js</code> service worker from. By default, <code>replayBase</code> is set to <code>./replay/</code> and so the service worker is loaded from <code>./replay/sw.js</code>.</p>
<p>For example, if you publish your JavaScript files at:</p>
<ul>
<li>https://example.com/js/ui.js</li>
<li>https://example.com/js/sw.js</li>
<li>https://example.com/wacz/example.wacz</li>
</ul>
<p>Then you must adjust your HTML to reference the new resources:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"/js/ui.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a>
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="p">&lt;</span><span class="nt">replay-web-page</span> <span class="na">replayBase</span><span class="o">=</span><span class="s">"/js/"</span> <span class="na">source</span><span class="o">=</span><span class="s">"/wacz/example.wacz"</span> <span class="na">url</span><span class="o">=</span><span class="s">"https://webrecorder.net"</span><span class="p">&gt;&lt;/</span><span class="nt">replay-web-page</span><span class="p">&gt;</span>
</code></pre></div>
<h2 id="embed-modes">Embed Modes<a class="headerlink" href="#embed-modes" title="Permanent link">&para;</a></h2>
<p>ReplayWeb.page offers four different ways to embed the archived content, including with or without the navigation UI, and with an archival information dropdown. The embed mode can be set via the <code>embed</code> property:</p>
<ul>
<li>
<p><code>default</code> or not set: Show the replay page and the location bar, allowing navigation to other pages and accessing the page list.</p>
</li>
<li>
<p><code>full</code>: Show the full replayweb.page UI and logo.</p>
</li>
<li>
<p><code>replayonly</code>: Show just the replayed page, and no additional UI or nav bar buttons. Useful for embedding a single page.</p>
</li>
<li>
<p><code>replay-with-info</code>: Show the <code>replayonly</code> mode, but also add an archive info dropdown, which shows an archival 'receipt' with provenance and verification information (new in 1.7.0)</p>
</li>
</ul>
<details class="example">
<summary>Example: Embed with <code>replay-with-info</code> enabled</summary>
<p><script src="/ui.js"></script>
<replay-web-page style="height: 600px" loading="eager" embed="replay-with-info" replaybase="/" source="/docs/examples/tweet-example.wacz"url="https://oembed.link/https://twitter.com/webrecorder_io/status/1565881026215219200"></replay-web-page></p>
</details>
<h2 id="embedding-options">Embedding Options<a class="headerlink" href="#embedding-options" title="Permanent link">&para;</a></h2>
<p>The <code class="highlight"><span class="p">&lt;</span><span class="nt">replay-web-page</span><span class="p">&gt;</span></code> tag is a web component that supports a number of additional attributes:</p>
<table>
<thead>
<tr>
<th style="text-align: left;">Attribute</th>
<th style="text-align: left;">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;"><code>source</code></td>
<td style="text-align: left;">Source URL for the archived item. This should be one of the <a href="../user-guide/#supported-formats">supported formats</a> loaded from one of the <a href="../user-guide/locations/">support locations</a> and is required.</td>
</tr>
<tr>
<td style="text-align: left;"><code>url</code></td>
<td style="text-align: left;">The starting URL to load from the archive. If omitted, will start with the page list or URL search view.</td>
</tr>
<tr>
<td style="text-align: left;"><code>ts</code></td>
<td style="text-align: left;">The ISO 8601 timestamp of the starting URL to load. If omitted, the latest available version is used.</td>
</tr>
<tr>
<td style="text-align: left;"><code>deepLink</code></td>
<td style="text-align: left;">If set, ReplayWeb.page will modify the URL of the page to allow for 'deep linking' to exact pages in the embed.</td>
</tr>
<tr>
<td style="text-align: left;"><code>updateFavicons</code></td>
<td style="text-align: left;">If set, ReplayWeb.page will set the favicon of the page to the current webpage being viewed. Only supported in Chrome.</td>
</tr>
<tr>
<td style="text-align: left;"><code>embed</code></td>
<td style="text-align: left;">(<code>default</code> / <code>full</code> / <code>replayonly</code> / <code>replay-with-info</code> ) - See <a href="#embed-modes">Embed Modes</a> above.</td>
</tr>
<tr>
<td style="text-align: left;"><code>swName</code></td>
<td style="text-align: left;">Service Worker filename (default: <code>sw.js</code>). Set if using different name, don't include path, only filename</td>
</tr>
<tr>
<td style="text-align: left;"><code>replayBase</code></td>
<td style="text-align: left;">Location of the service worker file (eg. sw.js), defaults to <code>./replay/</code> as mentioned above, but can be overridden.</td>
</tr>
<tr>
<td style="text-align: left;"><code>coll</code></td>
<td style="text-align: left;">Internal ID for this collection, usually generated automatically.</td>
</tr>
<tr>
<td style="text-align: left;"><code>config</code></td>
<td style="text-align: left;">Extra per collection config options (such as custom fuzzy matching rules, TODO add more info!)</td>
</tr>
<tr>
<td style="text-align: left;"><code>sandbox</code></td>
<td style="text-align: left;">If set, will iframe in <code>sandbox</code>. Provides extra isolation, but prevents PDFs from loading in an embed, and may result in links opening in new windows.</td>
</tr>
<tr>
<td style="text-align: left;"><code>noWebWorker</code></td>
<td style="text-align: left;">If set, will not use Web Worker for loading, only Service Worker. May be useful for certain loading edge cases.</td>
</tr>
<tr>
<td style="text-align: left;"><code>noCache</code></td>
<td style="text-align: left;">If set, will not cache any loaded content HTTP responses locally, always loading from original source.</td>
</tr>
<tr>
<td style="text-align: left;"><code>hideOffscreen</code></td>
<td style="text-align: left;">If set, will unload the embed when it is not visible and reload when scrolled into view. Useful if multiple embeds per-page to avoid loading all at once.</td>
</tr>
<tr>
<td style="text-align: left;"><code>hideMetadataSidebar</code></td>
<td style="text-align: left;">If set, will hide the sidebar shown on the page list. May be useful for embeds that show metadata elsewhere</td>
</tr>
<tr>
<td style="text-align: left;"><code>newWindowBase</code></td>
<td style="text-align: left;">set base replay URL loaded when a page opens a new window, defaults to <code>https://replayweb.page/</code> if <code>deepLink</code> not enabled, otherwise, to current page with new link.</td>
</tr>
<tr>
<td style="text-align: left;"><code>requireSubdomainIframe</code></td>
<td style="text-align: left;">If set, will only load embed in an iframe loaded from a subdomain, for increased origin isolation.</td>
</tr>
<tr>
<td style="text-align: left;"><code>loading="eager"</code></td>
<td style="text-align: left;">If set, will load the entire WACZ file at once (regardless of size), and not attempt on-demand range request loading.</td>
</tr>
<tr>
<td style="text-align: left;"><code>useRuffle</code></td>
<td style="text-align: left;">If set, will enable include Ruffle Flash emulator. Must include the <code>ruffle/</code> directory in <code>replayBase</code>.</td>
</tr>
<tr>
<td style="text-align: left;"><code>useAdblock</code></td>
<td style="text-align: left;">If set, will enable adblocking, by injecting CSS stylesheets to hide ads based on a list of ad filter rules. By default, the <a href="https://easylist.to/">EasyList</a> filter rules are used.</td>
</tr>
<tr>
<td style="text-align: left;"><code>adblockRulesUrl</code></td>
<td style="text-align: left;">Provide a URL to a custom <a href="https://adblockplus.org/filters">Adblock Plus filter rules</a> formatted text file. Note that only rules containing CSS selectors (via <code>##</code> filter) are used, other lines in the rules list are ignored.</td>
</tr>
</tbody>
</table>
<h2 id="further-examples">Further Examples<a class="headerlink" href="#further-examples" title="Permanent link">&para;</a></h2>
<p>For an example of a site built around multiple archived items, take a look at our <a href="https://github.com/webrecorder/example-webarchive/">example-webarchive repository</a> and <a href="https://webrecorder.github.io/example-webarchive">static website</a> hosted on Github pages. It may give you ideas for how to integrate the ReplayWeb.page component into your site. You may also be interested in <a href="https://github.com/webrecorder/web-replay-gen">Web Replay Gen</a>, an 11ty based static site generator for showcasing multiple WACZ files.</p>
<h2 id="common-issues">Common Issues<a class="headerlink" href="#common-issues" title="Permanent link">&para;</a></h2>
<p>Below are some possible issues that you may encounter when embedding and possible workarounds.</p>
<h3 id="embed-is-too-small-doesnt-fill-page">Embed is too small / doesn't fill page.<a class="headerlink" href="#embed-is-too-small-doesnt-fill-page" title="Permanent link">&para;</a></h3>
<p>If the <code class="highlight"><span class="p">&lt;</span><span class="nt">replay-web-page</span><span class="p">&gt;</span></code> tag is the only element on a page, and you want it to use the full window width and height, adding the following
CSS should fix the issue:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="nt">html</span><span class="o">,</span><span class="w"> </span><span class="nt">body</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a><span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
<a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="p">}</span>
</code></pre></div>
<h3 id="loading-errors">Loading Errors<a class="headerlink" href="#loading-errors" title="Permanent link">&para;</a></h3>
<p>If you see errors related to loading archived items such as <code>TypeError: failed to load</code>, the issue may be a result of a CORS error.</p>
<p>See <a href="cors-settings/">CORS Settings</a> for more info on how to configure CORS for ReplayWeb.page</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../" class="md-footer__link md-footer__link--prev" aria-label="Previous: Home">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Home
</div>
</div>
</a>
<a href="cors-settings/" class="md-footer__link md-footer__link--next" aria-label="Next: Configuring CORS">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
Configuring CORS
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Creative Commons Attribution 4.0 International (CC BY 4.0)
</div>
</div>
<div class="md-social">
<a href="https://webrecorder.net" target="_blank" rel="noopener" title="webrecorder.net" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
</svg>
</a>
<a href="https://forum.webrecorder.net/" target="_blank" rel="noopener" title="forum.webrecorder.net" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text-fill" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4.414a1 1 0 0 0-.707.293L.854 15.146A.5.5 0 0 1 0 14.793V2zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5z"/>
</svg>
</a>
<a href="https://digipres.club/@webrecorder" target="_blank" rel="noopener me" title="digipres.club" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16">
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/>
</svg>
</a>
<a href="https://www.youtube.com/@webrecorder" target="_blank" rel="noopener" title="www.youtube.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate": null, "base": "../..", "features": ["navigation.sections", "navigation.tabs", "navigation.tabs.sticky", "navigation.instant", "navigation.tracking", "navigation.indexes", "navigation.footer", "content.code.copy", "content.action.edit", "content.tooltips", "search.suggest"], "search": "../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../../assets/javascripts/bundle.d7400e89.min.js"></script>
</body>
</html>