▼
Streaming live at 10am (PST)

Auto Play Vimeo Videos

#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: http://forum.webflow.com/t/tutorial-responsive-video-using-html-embed/1316

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

    <iframe style="position: absolute; top: 0; left: 0;"
    src="//player.vimeo.com/video/--vimeovideoid--?title=0&byline=0&portrait=0&color=ff0179&loop=1"
    width="100%"
    height="100%"
    frameborder="0"
    webkitallowfullscreen mozallowfullscreen allowfullscreen>

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.

closed #5

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