This article provides instructions that should be used in the New VTurb Player. If you are using the Old Player, click here.

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>
document.addEventListener("DOMContentLoaded", () => {
  const player = document.querySelector("vturb-smartplayer");
  if (!player) return;

  player.addEventListener("player:ready", () => {
    player.addEventListener("video:play", () => {
      player.fullscreen("on");
      player.scrollIntoView({ behavior: "smooth", block: "center" });
    });

    player.addEventListener("video:pause", () => {
      player.fullscreen("off");
    });
  });
});

</script>

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

Updated on: 05/12/2025