Embed.svelte

<script lang="ts">
  import { PrismiceEmbed } from "@prismicio/types"
	export let embedCode;
	export let classes = "";
	export let responsive = false;
  export let background = false // only for Vimeo chromeless videos

  let htmlCode = embedCode.html

  if (background) {
    let regex = /src="([^"]*)"/;
    // Append the desired value to the end of the captured content
    htmlCode = htmlCode.replace(regex, (_, p1) => {
        return 'src="' + p1 + '&background=1"';
    });
  }
</script>

<div class:background class="{responsive && !background ? 'embed-container' : ''} {classes}">
	{@html htmlCode}
</div>

<style lang="postcss">
	:global(.embed-container) {
		position: relative;
		padding-bottom: 56.25%;
		overflow: hidden;
		max-width: 100%;
		height: auto;
	}

	:global(.embed-container iframe, .embed-container object, .embed-container embed) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

  .background,
  .background :global(iframe) {
    width: 100%;
    height: 100%;
  }
</style>

FullBleedVideo.svelte

<script lang="ts">
  import { onMount, onDestroy } from "svelte"
  export let embedCode: string
  export let startTime = 0
  import { contextualText, contextualTextColor } from "$lib/legacy/stores/lang"
  import Embed from "$lib/atoms/embed.svelte"

  let [innerWidth, innerHeight, clientWidth, clientHeight] = [0, 0, 0, 0]

  let videoElement

  import { createEventDispatcher } from "svelte"

  $: parentAspect = innerWidth / innerHeight
  $: childAspect = clientWidth / clientHeight
  $: fitToHeight = innerWidth / innerHeight > 7 / 5
  $: fitToWidth = innerWidth / innerHeight <= 7 / 5


  const dispatch = createEventDispatcher()

  const handleClick = () => {
    dispatch("close")
  }

  const pointer = () => {
    contextualText.set("- Close")
    contextualTextColor.set("#FFFFFF")
  }

  onDestroy(() => {
    contextualText.set("")
    contextualTextColor.set("#000")
  })
</script>

<svelte:window bind:innerWidth bind:innerHeight />

<div
  class="full-bleed-video"
  on:click={handleClick}
  on:mouseover={pointer}
>
  <div
    bind:clientWidth
    bind:clientHeight
    class:fitToHeight
    class:fitToWidth
    class="video-player pointer-events-none"
    style:transform="translate(-50%, -50%) scale({fitToHeight ? innerWidth / clientWidth : innerHeight / clientHeight })">
    <Embed {embedCode} background />
  </div>
</div>

<style lang="postcss">
  .full-bleed-video {
    @apply w-screen h-screen fixed inset-0 z-20 bg-gray-100;

    & .video-player {
      @apply aspect-[7/5];
      position: absolute;
    left: 50%;
    top: 50%;
    }
  }
  .fitToWidth {
    /* border: 1px solid red; */
    width: 100%;
    /* transform: translate(-50%, -50%) scale(1); */
  }

  .fitToHeight {
    height: 100%;
    /* transform: translate(-50%, -50%) scale(1); */
  }
</style>