JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<!-- Place in "Custom HTML/JS element -->
<video id="videobg" autoplay="autoplay" loop="loop" muted="true">
  <source src="//website.com/video.mp4" type="video/mp4"></source>
  <source src="//website.com/video.ogv" type="application/ogg"></source>
  <source src="//website.com/video.webm" type="application/webm"></source>
</video>
<img id="videobgimg" src="//placehold.it/1280x720.png" />


<!--  This needs to go in Tracking Code Footer section  -->
<script>
  $( document ).ready(function() {
    var playcount = 0;
    
    document.getElementById("videobg").addEventListener("playing", function() {
      if (playcount == 0) {
        document.getElementById("videobgimg").style.opacity = 0;
        playcount++;
      } else if (playcount > 0) {
        if (playcount == 30) {
          document.getElementById("videobg").pause();
        }
        playcount++;
      }
    }, true);
  });
</script>

CSS

/* --------------- ClickFunnels Video BG --------------- */
/* ------------------ By Matt Hopkins ------------------ */
/* --- © 2017 ZAGG Studios, Ltd. All rights reserved --- */

#section--96103-163 {
  background-position: 50% 40%;
  background-size: cover;
}

#section--96103-163 .containerInner {
  width: 100% !important;
  overflow: hidden;
  position: relative
}

#videobg {
  width: 100% !important;
  height: auto;
  position: absolute;
  margin: 0;
  padding: 0;
}

#videobgimg {
  width: 100% !important;
  height: auto;
  position: absolute;
  margin: 0;
  padding: 0;
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

#row--33986-119-128-100 {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto !important;
}

#row--18338-175 {
  height: 0;
}

#row--18338-175 * {
  padding: 0 !important;
}

#row--18338-175 .innerContent {
  padding: 0 !important;
}