Fullscreen Experience

In this article, we've got a code for you that'll let you give your videos a Fullscreen Experience!

Using it has some cool perks, like making the viewer's experience more immersive, which usually boosts engagement.

With the Fullscreen Experience, when your video starts, it'll expand just like it's in full-screen mode!

But here's the neat part – your viewer can still scroll down to check out other info on the page (like the Call to Action button), no need to get stuck in the video!



Pause the video, and it goes back to its original size.



To make this happen for your video, use the embed option in JS format.



Now, just drop the script below into your page's HTML:

<script>
  function moveCTA(container) {
   const cta = container.querySelector(".smartplay + .smartplayer-call-action");

   if (!cta) return;

   container.parentNode.insertBefore(cta, container.nextSibling);
  }

  function insertBeforePlayer(instance, prefix) {
   if(!instance) return;

   const player = instance.mobileContainer || instance.container;

   const container = document.createElement("div");

   container.id = `${prefix}-${instance.options.id}`
   container.classList.add(prefix);

   player.parentNode.insertBefore(container, player);

   container.appendChild(player);

   return container;
  }

  function mountContainers() {
   const instances = window.smartplayer.instances;

   instances.forEach(instance => {
    const container = insertBeforePlayer(instance, `player-fake-fs`)

    if(!container) return;

    moveCTA(container)

    let firstClick = instance.resume?.inResume === undefined;

    container.addEventListener("click", () => {
     console.log(instance.resume)
     if (!firstClick && container.dataset.fullscreen === "true") instance.pause();

     firstClick = false;
    });
   });

   instances.forEach(instance => insertBeforePlayer(instance, `player-auto-height`));
  }

  function mountStyles() {
   const styles = document.createElement("style");

   styles.innerHTML = `
    .player-fake-fs[data-fullscreen='true'] {
     display: flex !important;
     align-items: center !important;
     background-color: #000 !important;
     height: 100vh !important;
     width: 100vw !important;
     cursor: pointer;
    }

    .player-fake-fs[data-fullscreen='true'] .player-auto-height .smartplayer-mobile-container {
     max-width: 100% !important;
    }

    .player-fake-fs[data-fullscreen='false'] .player-auto-height {
     width: 100% !important;
    }

    .player-fake-fs[data-fullscreen='false'] {
     margin-left: 0 !important;
    }

    .player-auto-height {
     margin: 0 auto;
     width: 100%;
    }
   `;

   document.head.appendChild(styles);
  }

  function adjustXPositionFs() {
   const currentFs = document.querySelectorAll(".player-fake-fs[data-fullscreen='true']");

   currentFs.forEach(container => {
    container.style.marginLeft = "0";

    const position = container.getBoundingClientRect()

    if(position.left <= 0) return;

    container.style.marginLeft = `-${position.left}px`;
   });
  }

  function changeWidthByHeight() {
   const containers = document.querySelectorAll(".player-auto-height");

   containers.forEach(container => {
    const video = container.querySelector("video");

    if (!video) return;

    const aspectRatio = video.clientWidth / video.clientHeight;

    const windowHeight = window.innerHeight;
    const newWidth = windowHeight * aspectRatio;

    const width = (newWidth / window.innerWidth) * 100;

    container.style.width = `${width >= 100 ? 100 : width}%`;
   });
  }

  function scrollToFS(container) {
   const position = container.getBoundingClientRect();

   window.scrollTo({
    top: position.top + window.scrollY,
    left: position.left + window.scrollX,
   });
  }

  function toggleFs(id, inFullscreen = false) {
   const container = document.getElementById(`player-fake-fs-${id}`);

   if (!container) return;

   container.dataset.fullscreen = inFullscreen.toString()

   if (inFullscreen) {
    window.addEventListener("resize", changeWidthByHeight);

    changeWidthByHeight();
    adjustXPositionFs();

    return scrollToFS(container);
   }

   window.removeEventListener("resize", changeWidthByHeight);
  }

  function mountFakeFsEvents() {
   const instances = window.smartplayer.instances;

   window.addEventListener("resize", adjustXPositionFs);

   instances.forEach(instance => {
    instance.on("play", () => toggleFs(instance.options.id, true));

    instance.on("pause", () => toggleFs(instance.options.id, false));
   });
  }

  function customEvents() {
   mountContainers();
   mountStyles();
   mountFakeFsEvents()
  }

  function checkPlayerLoaded() {
   if (window.smartplayer && window.smartplayer.instances) return customEvents()

   return setTimeout(checkPlayerLoaded, 100)
  }

  window.addEventListener("load", () => checkPlayerLoaded())
</script>

There you have it – your video now comes with the Fullscreen Experience activated!

Updated on: 12/14/2023