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.

Fit available widthPhone · 390 pxTablet · 768 pxDesktop · 1280 px
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>