Auto Play Vimeo Videos

Design help Custom code
1

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

2

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!

3

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

4

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

5

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