Untitled

(function() {
  try {
      /* main variables */
      var debug = 0;
      var variation_name = '';

      /* all Pure helper functions */

      function waitForElement(selector, trigger, delayInterval, delayTimeout) {
          var interval = setInterval(function() {
              if (document && document.querySelector(selector) && document.querySelectorAll(selector).length > 0) {
                  clearInterval(interval);
                  trigger();
              }
          }, delayInterval);
          setTimeout(function() {
              clearInterval(interval);
          }, delayTimeout);
      }

      /* Variation functions */



      function init() {
          // insertin a new div in the hero section
          document.querySelector('#page_block_header > div.section-block').insertAdjacentHTML('afterbegin', `
          <div class="eg-video-container"><iframe src="https://player.vimeo.com/video/770916709?title=0&autoplay=1&muted=1&controls=0&sidedock=0&loop=1"></iframe></div`);

      }
      /* Initialize variation */
      waitForElement('#page_block_header > div.section-block', init, 50, 15000);
  } catch (e) {
      if (debug) console.log(e, 'error in Test' + variation_name);
  }
})();



<style>
.eg-video-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 540px;
  height: 32.0625rem;
  opacity: 0.6;
  filter: grayscale(0.15);
}

.eg-video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  background: url('https://vumbnail.com/770916709.jpg');
  background-position: center;
  background-size: contain;
}

#page_block_header .section-block {
  background: none;
}

.eg-video-container+.section-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

@media screen and (min-width:768px) {
  .eg-video-container {
    background: url(https://vumbnail.com/770916709.jpg);
    background-position: center;
    background-size: contain;
  }

  html body #element-69 {
    top: 50%;
  }

  html body #element-240 {
    top: 86%;
  }
}

@media (min-aspect-ratio: 16/9) {
  .eg-video-container iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}

@media screen and (min-width:768px) and (max-aspect-ratio: 16/9) {
  .eg-video-container iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

@media screen and (max-width:767px) and (max-aspect-ratio: 16/9) {
  .eg-video-container iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 110vh;
    height: 35vh;
    top: 0;
    transform: translateX(-50%);
  }

}

@media screen and (max-width:767px) {
  html body div#element-257 {
    top: 1.375rem;
  }

  html body #element-220 {
    top: 6.375rem;
  }

  html body #element-226 {
    top: 23.375rem;
  }

  html body #page_block_header {
    max-width: 100%;
    height: 27rem;
  }

  html body .eg-video-container+.section-inner .widget.hidden-mobile {
    display: block !important;
  }

  html body .eg-video-container+.section-inner {
    height: 50% !important;
    top: 86% !important;
  }

  html body .eg-video-container+.section-inner #element-240 {
    top: 110px !important;
  }
}
</style>