Embedded Video Expand to Full Bleed on Mouse Click

Design help Custom code
1

Hello everyone,

I am wanting to figure out how to expand my video to full bleed on a mouse click. Right now I have a vimeo embed loop and autoplaying when the site loads but I would like to add an interaction when I click to expand to full bleed.

If anyone has any ideas let me know!

Here is my site Read-Only: LINK

2

I think that’s a neat idea to make your site more interactive! For expanding a Vimeo embed to full bleed on click, you’ll need some custom JavaScript and CSS. Basically, you’d add an event listener to your video element in JavaScript that triggers a CSS class change on click. This class should have styles set for full bleed display (like width: 100vw, height: 100vh, position: fixed).

Here’s a rough structure:

JavaScript: Add addEventListener to your video element for the 'click' event.
CSS: Create a class with full bleed styles.
JavaScript: On click, toggle this class on your video element.

This approach keeps it responsive and interactive. If you’re not familiar with JavaScript or CSS, there are plenty of tutorials online that can guide you through this process. Or, you might find a plugin that does something similar.

Have a good one :slight_smile:

1 Like
3

Thanks for the advice. I know close to nothing about coding so I have been using chat gpt to help.

I still haven’t been able to get it to work, right now I can’t seem to bypass pausing the video upon mouse click. Here’s the code I have been working with so far:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vimeo Video Player</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #video-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      height: 50%;
      transition: width 0.5s, height 0.5s;
    }

    #video-container.fullscreen {
      width: 100%;
      height: 100%;
    }

    iframe {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<div id="video-container">
  <div style="padding:56.25% 0 0 0;position:relative;">
    <iframe src="https://player.vimeo.com/video/883385861?h=d6944d2c27&autoplay=1&muted=1&loop=1&color=0ad9dc&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

<script>
  document.getElementById('video-container').addEventListener('click', function() {
    this.classList.toggle('fullscreen');
  });
</script>

</body>
</html>

If this issue isn’t possible to bypass I think having it expand when scrolled into view would be nice. Something like this company has Dagger. Please let me know if you have any ideas!

4

Maybe expanding to full bleed upon scrolling into view is possible without custom code? Maybe it’s something I can do with the element triggers? It hasn’t worked perfectly doing it this way so not 100% sure if it’ll work

5

Hey Ben,

I think you could use the ‘While scrolling into view’ trigger in Webflow’s interaction panel. Here’s a quick guide:

  1. Select your video container in the Designer.
  2. Go to the Interactions panel and add a ‘While scrolling into view’ trigger.
  3. Create an animation that changes the size of your video container to full bleed as it scrolls into view.

This approach should avoid the issue with the video pausing on a click and also adds a smooth, dynamic feel to your site. The key is to experiment with the settings to get the right look and feel.

Greetings,
Lukas