Auto Play Vimeo Videos

[pixelsock (Nick)]

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

[cyberdave (Dave Sloane)]

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

1. Read the html responsive video tutorial for embes: [Tutorial] Responsive Video using HTML Embed

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:

responsive-vimeo-embed - Webflow

I hope this helps, maybe give you some ideas!

[pixelsock (Nick)]

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

[pixelsock (Nick)]

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