I have a bit of an issue. One of the pages I am working on requires to show some videos as examples of work. They are short 10 second loops.
I want to have a couple of videos autoplay and loop when the page loads. I have tried everything I can see to use with video elements but I can’t get it to work. I have tried using embedded Youtube videos but they don’t seem to size the way I need.
I also tried converting the videos to GIFs but, a) the quality suffers beyond acceptable levels, and b) GIF files were larger than 4mb.
I have created a page with a visual example of what I want to do.
To get the video to play on auto-loop, you’ll need to:
Insert them as “Background Video” components.
2 To resize the way you want, insert it into a Div, then set the size on the Div for centering, etc.
If you want to completely control size, spacing, etc; add these two into a Section and set it to Flex or Center Width (the two buttons on edge) in the Styles panel.
Thanks for the response. I’m not sure I completely follow. Every time I have tried to use background video for this task it hasn’t worked. The background video doesn’t seem to conform to the dimensions of the div I drop it in to.
Does that make sense?
Also background video doesn’t work on mobile view right?
Yes correct. The Background component needs a parent Div to control it better. Use a regular Div and style is with VW & VH, for width and height. Then the video will resize easier.
Remember Background Video are just that, in the background, which means they are necessarily effecting the DOM elements (directly). Not like a text or image element.
You can use an Embed component if you want more control. But yes the BG Video component needs a parent Div to get more sizing control.
If you add styles; color, gradients, etc to the parent Div, the BG Video will need a higher z-index, just do 1.
** Update
Oh and yes, the BG Video will disable for mobile views. Which is sort of why I’d use an HTML Embed component instead. It’s just the best case scenario for all situations. Otherwise, you’ll be adding multiple elements for such a simple process, right?
Man, i’m really losing my patience with this. I have just subscribed to Vimeo in the hope that it might offer a better solution. Still having the same issue.
If I embed a video from Vimeo it doesn’t conform to a parent div.
I have updated my test page to just include standard videos. THey behave exactly as I would like them to apart from the autoplay not working. Is there any way to get these videos to auto play?
Thanks for the autoplay solution, I thought that only worked on embedded videos but it seems to work for standard videos too. That will do for now.
Edit:
OK so it only seems to work on one video at a time. So you can’t have both autoplay. As soon as you press play on one of the other videos it stops the other.
On that video you showed, what was wrong with it? Do me a favor send your video to my profile and I’ll test it on my end. Because I’ve tested MP4’s and it works fine. I’m not understanding what’s not working for you.
What was wrong was the background video wasn’t conforming to the parent div. I wanted the video to behave like I had those placeholder photos. Responsive and resizing etc, and most importantly conforming to the parent div.
Any chance you and steven arrived at a solution?
I’m trying to do the same thing, have multiple vimeo videos autoplay on the one page.
It looks like it’s working after I edit the HTML embed in Webflow,but once I publish the site the autoplay stops working.
Also, is there a way to control the aspect ratio of the video so it doesn’t get letterboxed within its parent DIV? (I currently have the HTML Embed’s parent div set to 80vh, just so I can see whether the autoplay works!)
Hey,
Sorry for the delayed response. I’m going to read your question in my profile now…
Okay, now remember, MP4’s will autoplay. But they are created in the editing program, and their dimesions are set there. It’s not really feasible that Webflow manages the ‘actual’ sizing completely, most of the issues will start in your video editing process. As we know, are a couple of ways to manage video content. (And it is completely different than other content) Background, Embed or Link. If full sizing control is necessary, then opt for creating an HTML video - from your video software. Then your embed process can be control via the code.
Divs and other HTML wrappers/content holders can hold a video, but that Div also needs a wrapper to be fully controlled. For example, using a Video Service Company, where you can Upload a video, Select a container wrapper style and Choose your embed options. Honestly, only HTML 5 Videos embedded will offer full control. I.e., guaranteed auto-play, device settings, responsiveness etc. Options like these allow for better control and flexibility for the embed:
Guaranteed “Responsiveness” is only going to come from a video embed service.
I wouldn’t use Vimeo for this type of embed, options are limited. Use one of the listed services above to find better extensibility in player customization.
If you both want to use Vimeo or simply continue with a basic MP4. I would not use a Div, add the video with Embed component and give it 100vw, 100vh. This will make as large as the viewport. Adjust size manually.
Alternatively:
Add a Section: No width size. Height, add a ‘pixel’ size for basic. For responsiveness, use VH
Insert Embed Video Component: Only add Height 100%
This should give the best responsive behavior for an MP4, Vimeo, YouTube type IFrame embed.
Hope this helps you guys - I’m grinding it out with ya
Hi Steve,
I am jumping in at this late stage, sorry if I am misunderstanding the requirements, in your read-only site, are the two videos on the page actual videos you are using on the site?
The reason I ask is yes, you are right videos are very annoying to use, it seems to me, if the videos are exactly along the lines of the examples shown, the easiest solution is to build them as animations not videos, the examples shown would take no time at all to build as a looping animation, the hardest part would be to have access to the individual elements, but they must already exist to have made the video.
Your videos are playing fine. What issue are you experiencing on publish?
Just found out that it was the native disabling of autoplay feature in Safari which was causing problems. It worked fine once I enabled it! Though I’ve been doing some cross browser testing and it doesn’t seem to work proper on Firefox. Chrome is good.
I’m not sure I understand what you mean by ‘letterboxed’ from the parent Div?
Oh by letterboxing, i meant that there’ll be unwanted gaps top and bottom of the video when I resize the browser. This is resolved now anyways, after following your instructions to setting the VH and video component to 100% height.
It looks like you have the small iframe.
Could you please advise on this? I don’t seem to see any setting/function to set the iframe size (on vimeo).
Question - Is there anyway of controlling the size of the iframe by VW and not VH? I’m in the midst of redesigning a couple of pages and most of my other DIVs are set to VW.
Hey!! Chen, Awesome! Glad to help remove that letterbox and setting video responsiveness.
On various browser testing:
Yeah, this is always going to take a little testing because they haven’t quite adopted universal standards. The only way to get closer for all is to use an HTML 5 video embed. That’s what those services I posted will give - the ability to customize before uploading. True flexibility really comes during the embed creation, and these services allow for CSS tweaks before encoding into a wrapper before processing. If you need full compatibility, give a service a try, you may find easier embed customization.
Vimeo Iframe:
I’m not sure how much customization Vimeo offers, I don’t use their service. Actually, I use Cincopa. In my opinion, this is the best service on the market. They offer multiple embeds; video, audio, gallery and slideshow. They allow full CSS customization and a ridiculous amount of embed options, including JS. I’d use this for your case. It’s one price for all the options too, I love them
Place the VW & VH in the Vimeo Iframe before uploading to Webflow. Check to see if they allow CSS access before processing. And yes, it’s best to use this method on most of your Div’s. However, be cautious and use this on the outer Divs, not inner/nested Divs.
To be clear & help your responsivenes site wide:
Minimize blue CSS styles. The more blue styles you set, the more you break the DOM. Lots of CSS styles will cause rendering issues for browser compatibility. Limit excessive blue styles in the panel.
When adding Divs, Images, Content, try to add content without any sizing, etc. Add nested content as is - and get the elements on the canvas. Then add responsiveness to the parent Divs - VW, VH, %. If you get in the habit of adding this to inner elements, your browser rendering will be effected.
Hope this helps ya! Let me know if you need anything else. See ya
hey @garymichael1313!
Sorry I totally missed your reply.
I’ve ended up doing without autoplay for the moment.
But I will be revisiting this again soon, may have questions then…
Upload your video to Vimeo and then go to share and grab the iframe code. Then in the first src reference add ?autoplay=1 at the end of the video reference. You add this code into div using the ‘embed’ option. Looks to be working.
Otherwise, you’ll be adding multiple elements for such a simple process, right?
