I am new to Webflow. Could you please help me to figure out how to make such videos as Webflow shows on their landing page:
How to display a video without host thumbnails (aka youtube, vimeo) and autoplay it on page loading, so it looks nice and clean.
As a UX designer, I need this badly for my portfolio to showcase my prototypes. I invested tons of time to learn Webflow and now I am stuck with this. Please please help!
Hi Mira! Just to clarify, is the screenshot below what you’re referring to on that page?
If so, this is actually not a video, but a Lottie animation. You can learn more about those here.
As far as an autoplaying video that doesn’t require interaction to start… if you don’t need audio, you can use the Background Video element inside of another container / div block. Nice and easy, and everything is built right into Webflow.
If this method doesn’t give you enough flexibility, I believe Vimeo offers a plan that will give you direct video links, which you could then embed using custom HTML such as this:
<video controls autoplay>
<source src="VIDEO URL HERE" type="video/mp4">
Let me know if this helps or if you have any questions! Thanks.
Thank you SO much for such a quick answer.
Wow, I did not know that it was a Lottie animation. To me, this animation looked like a screen recording. Thanks, I am going to learn more about Lottie.
I tried the background video - it amazingly does what I need (so simple!) BUT it only allows MP4 files under 30MB. My video looks fuzzy, blurry. Any tricks?
Also, I noticed that my Embed button is disabled. I am on a Free Staging plan so far. Is it because of that?
For a fuzzy / blurry video, this is likely due to the video being scaled on your design beyond the original size of the video. I’d recommend re-recording your video, if possible, and make sure your recording resolution is at least the same size as the element you’re placing (if not larger), and you’re working at a manageable bitrate that will fall under the 30MB file size limit. You’ll want to consult the documentation of whatever software you’re using to record/save your video for more on this.
You do need a paid Webflow account or an active site plan to use the Embed element.