ios-video-background.svelte

<script>
  import { onMount } from "svelte";
  import Container from "../utils/Container.svelte";

  // let is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  const playVideo = (id) => {
    let vid = document.getElementById(id);
    vid.src = "" /* Put a source here... */;
    vid.preload = "auto"
    vid.muted = true;
    vid.autoplay = true;
    vid.loop = true;
    vid.playsinline = true;
    vid["webkit-playsinline"] = true
    vid.play();
    console.log(vid);
  };

  onMount(() => {
    playVideo("hero");
    playVideo("hero-mobile");
  });
</script>

<section class="showcase" id="home">
  <div class="video-container !hidden md:!block">
    <video id="hero" muted autoplay loop playsinline>
      <source src="/videos/bg-office.mp4" type="video/mp4" />
    </video>
  </div>
  <div class="video-container !block md:!hidden">
    <video id="hero-mobile" autoplay loop muted playsinline>
      <source src="/videos/bg-office-mobile.mp4" type="video/mp4" />
    </video>
  </div>
  <div class="content text-gray-300">
    <Container>
      <div class="flex flex-col md:flex-row relative">
        <div
          class="w-full h-screen lg:w-8/12 flex flex-col justify-center relative z-10"
        >
          <h1
            class="drop-shadow-xl mb-5 md:pt-20 text-4xl sm:text-5xl md:text-5xl lg:text-6xl"
          >
            <div class="text-sm pl-2 border-l-2 border-brand-red mb-2">
              Lorem ipsum dolor sit amet.
            </div>
            <div class="h-font md:!font-thin">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Blanditiis quos optio natus quod nulla, ratione ex maxime a at rem
              itaque illum ipsam iste error.
            </div>
            <div class="mt-[1rem] w-[5rem] border-b border-brand-red/90" />
          </h1>

          <p class="mb-5 text-gray-300 tracking-wide">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
            similique magnam voluptatum illo sequi quasi, assumenda, omnis,
            excepturi atque laborum ipsum! Doloremque vel suscipit nobis.
          </p>

          <a href="/book" class="btn btn-secondary">
            PRENDRE RENDEZ-VOUS
            <ion-icon name="calendar" class="text-xl ml-2" />
          </a>
        </div>
        <div
          class="w-full pb-12 md:pb-0 md:h-screen lg:w-4/12 flex items-center justify-center relative z-10"
        >
          <!--  -->
        </div>
      </div>
    </Container>
  </div>
</section>

<style>
  .showcase {
    height: 100vh;
    position: relative;
  }

  /* TODO, Fallback background here */
  .video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--primary-color)
      url("./https://traversymedia.com/downloads/cover.jpg") no-repeat center
      center/cover;
  }

  .video-container video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }

  .video-container:after {
    content: "";
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.05);
    position: absolute;
  }

  .content {
    box-shadow: inset 50vw 0 70px -7px rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: linear-gradient(
      to right top,
      #039be520,
      #1da5ea20,
      #2fafee20,
      #3fb9f320,
      #4fc3f720
    );
  }
</style>