Auto Play Vimeo Videos

I’m looking to solve an issue with trying to autopaly a video, but keep it responsive. I tried the background into a section and it doesn’t remain responsive. I’ve tried added url perimeters to a Vimeo link, that doesn’t work. I’ve tried using vimeo’s embed feature (iframe) but that isn’t responsive.

The public link is https://preview.webflow.com/preview/saturday2?preview=b7c298324ab0e0e1dcd4ab0ab23ec2f6 and the page in question is Home-New

Hi @pixelsock, I would suggest to do the following:

  1. Read the html responsive video tutorial for embes: [Tutorial] Responsive Video using HTML Embed - Webflow Tips - Forum | Webflow

  2. Use the following code within the embed, of course replace the source url:

In the above, where it says --vimeovideoid-- replace that with the vimeo video you want to display.

Next open the page settings and in the Before Body custom code, paste the following:

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);
    
    player.play();

</script>

Save changes and republish the site.

Here is an example site with a layout that i use a few interactions to change the size of the video when a user clicks a button:

https://webflow.com/website/responsive-vimeo-embed

I hope this helps, maybe give you some ideas!

This is wonderful. Thank you for the thorough response. This is very much appreciated.

Thank you so much for the reply. This works wonderfully.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.