Browse Blocks
Deferred Embed
Load a demo or third-party experience only after an explicit action.
Basic
Load a demo or third-party experience only after an explicit action.
View Code
<section class="site-section stack" data-embed aria-label="Interactive demo">
<div class="cluster">
<a class="btn" data-embed-load href="https://example.com/">
Load Demo
</a>
<button class="btn ghost" type="button" data-embed-fullscreen hidden>
Full Screen
</button>
</div>
<p data-embed-status role="status">
The demo loads only when you choose to open it.
</p>
<iframe
class="site-embed"
title="Interactive demo"
data-embed-frame
data-src="https://example.com/"
sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock"
allow="fullscreen"
referrerpolicy="strict-origin-when-cross-origin"
tabindex="0"
hidden
>
</iframe>
<p>
<a
class="link-underline link-animated"
href="https://example.com/"
target="_blank"
rel="noopener noreferrer"
>
Open Demo in a New Tab
</a>
</p>
</section>