DocuSketch embed test

Lobdell timeline project: pre-loss KzySXm4D, post-construction nBn_UTAd. Two ways to put a walkthrough on a page, each with the code used.

Option 1

Before and after, two players side by side

Two iframe embeds in a grid, one per timeline of the same project. Pre-loss is KzySXm4D, post-construction is nBn_UTAd.

Before (pre-loss)

After (post-construction)

Code

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
  <div>
    <p>Before</p>
    <div style="padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden;">
      <iframe allowFullScreen frameborder="0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
        src="https://app.docusketch.com/player/KzySXm4D"></iframe>
    </div>
  </div>
  <div>
    <p>After</p>
    <div style="padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden;">
      <iframe allowFullScreen frameborder="0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
        src="https://app.docusketch.com/player/nBn_UTAd"></iframe>
    </div>
  </div>
</div>

Option 2

Before and after in one player (Timeline Compare Mode)

One iframe of a project that has timelines. The public player shows the timeline bar across the top (Pre Loss, Mitigation, Post Construction). The split-screen button beside it opens Compare Mode with Side by side, Split, and Sync. No custom layout needed, and it's the plain iframe embed.

Code

<div style="max-width: 100%; padding-bottom: 56.25%; position: relative; height: 0; overflow: hidden; ">
  <iframe webkitAllowFullScreen mozallowfullscreen allowFullScreen frameborder="0"
    id="iframeTour-KzySXm4D"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
    src="https://app.docusketch.com/player/KzySXm4D"></iframe>
</div>