
<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Wed Dec 11 2024 08:59:05 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="3dvideo.webflow.io" data-wf-page="6752a7e13c80c35d4e9a5460" data-wf-site="6752a7e03c80c35d4e9a541f"><head><meta charset="utf-8"/><title>Charlie&#x27;s Dynamite Site</title><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://cdn.prod.website-files.com/6752a7e03c80c35d4e9a541f/css/3dvideo.webflow.e0340271f.css" rel="stylesheet" type="text/css"/><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"/></head><body class="body"><div class="viewport" data-ix="load"><div class="player"><div id="play-button" data-w-id="643dc553-ced8-2ea1-feaf-412fd72a15c0" style="-webkit-transform:translate3d(0, 0px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 0px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 0px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 0px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="player-controls"><div class="control-button-wrapper"><div id="play-videos" class="play-button" data-ix="play-button"><img src="https://cdn.prod.website-files.com/6752a7e03c80c35d4e9a541f/675856475f9058ff0e740d61_proportion.svg" loading="lazy" alt="" class="proportion pointer"/><img src="https://cdn.prod.website-files.com/6752a7e03c80c35d4e9a541f/67585774c60657038034a2dd_play%20(1).svg" loading="lazy" alt="" class="control-icon play pointer"/></div><div id="pause-videos" class="pause-button" data-ix="pause-button"><img src="https://cdn.prod.website-files.com/6752a7e03c80c35d4e9a541f/675856475f9058ff0e740d61_proportion.svg" loading="lazy" alt="" class="proportion pointer"/><img src="https://cdn.prod.website-files.com/6752a7e03c80c35d4e9a541f/6758590f3bad4e61c7c11682_pause.svg" loading="lazy" alt="" class="control-icon pointer"/></div></div></div><div class="video-box"><div class="video-wrapper-5"><div class="video-wrapper-4"><div class="video-wrapper-3"><div class="video-wrapper-2"><div class="video-wrapper"><div class="video _1 w-embed"><video id="a" class="player auto" width="auto" height="100%" loop playsinline>
      <source src="https://storage.googleapis.com/genesis-18967667/2222.mp4" type="video/mp4">
      <!--Browser does not support <video> tag -->
    </video></div></div></div></div></div></div></div></div><div class="light"><div class="flex"><div class="video center vanish w-embed"><video id="b" class="video-light auto" height="100%" muted loop playsinline>
      <source src="https://storage.googleapis.com/genesis-18967667/oibioboiboi.mp4" type="video/mp4">
      <!--Browser does not support <video> tag -->
    </video></div></div></div><div class="glow-light"><div class="flex"><div class="video blur w-embed"><video class="video-light auto" height="100%" loop muted playsinline>
      <source src="https://storage.googleapis.com/genesis-18967667/oibioboiboi.mp4" type="video/mp4">
      <!--Browser does not support <video> tag -->
    </video></div></div></div></div><div class="w-embed"><style>

.pointer {pointer-events: none;}


.video-wrapper { -webkit-mask: linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 10%);}
.video-wrapper-2 { -webkit-mask: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 10%);}
.video-wrapper-3 { -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 15%);}
.video-wrapper-4 { -webkit-mask: linear-gradient(360deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 15%);}




</style></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6752a7e03c80c35d4e9a541f" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/6752a7e03c80c35d4e9a541f/js/webflow.3145666c24bf362a5e6ce268967bd8ef.js" type="text/javascript"></script><script>

function syncVideos() {
    const first = document.getElementById('first-video');
    const second = document.getElementById('second-video');

    // keep track of if video's seeking to avoid constant changes to position
    // don't know if this is really necessary
    let isSeeking = false;
    second.addEventListener('seeking', () => isSeeking = true);
    second.addEventListener('seeked', () => isSeeking = false);

    const thresholdMilliseconds = 50; // some ms threshold of difference to avoid excessive seeking
    const nudgeOffsetMilliseconds = 5; // just a guess that you may need to assume that seeking won't be instantaneous. I don't know if this is necessary or helpful

    // listen for time updates on the first video's position
    first.addEventListener('timeupdate', () => {
        const deltaMilliseconds = (second.currentTime - first.currentTime) * 1000;
        if (Math.abs(delta) >= thresholdMilliseconds) {
            if (isSeeking) {
                console.warn('not in sync, but currently seeking');
                return;
            }
            console.log(`out of sync by ${deltaMilliseconds}ms. Seeking to ${first.currentTime}`);

            // adding a bit of nudge b/c syncing may not be instant. Not an exact science...for that use MSE
            second.currentTime = first.currentTime + nudgeOffsetMilliseconds;
        }
    });
}
syncVideos();

</script>






<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  function stopAllVideos() {
    $('video').each(function() {
      this.pause();
    });
  }
  function playAllVideos() {
    $('video').each(function() {
      this.play();
    });
  }
  $('#pause-videos').click(stopAllVideos);
  $('#play-videos').click(playAllVideos);
  stopAllVideos();
});
</script></body></html>