I’ve seen a lot of questions but couldn’t find a solution. It seems like many issues are related to mobile, but not me. All I want is to show a video on desktop, in a loop, but not on full screen.
2 Likes
Thats because you have the hight on the video set to 500px and the width of the div to 500px so of course it will go outside of the parameters. Background videos don’t work the same as background images. Size your video manually based on it’s aspect ratio. Do you want this to be a popup type thing or just a certain size on the page? If the latter, just nest it inside a section then container and it should span 960px wide automatically.
If you are new to Webflow and web design in general, I suggest checking out a whole lot of the videos on the university page before continuing. It will save you tons of frustration.
1 Like
Hey, @LupoAsaf,
Background video is not the proper choice for what you’re trying to accomplish. By its very nature, it is intended to provide context by supporting the adjacent or overlaid content. Likewise, background video will always “cover” the available space as opposed to "contain"ing the video in the available space. If you were using an image, you’d have the choice between the two.
However, I think what you’re looking for is a scalable video component. There are two which are labeled as video or youtube in the components panel. Just set the video “100%” width and height to “auto” and it will stay proportionate to its container…however…
It also appears you’re trying to show a non-hosted video (i.e. not Youtube, Vimeo, etc). That, unfortunately, eliminates the two video components mentioned. There is no current, built-in, component that allows you to upload your own video (like background video does) but treats it like a traditional video.
Is there a reason you’re not using youtube nor vimeo to serve up this video?
2 Likes
Thank you for the quick reply. I don’t mind hosting the video at all, but I’d like the video to auto-play and loop (like a GIF but without the limitation of length or quality). It seems like the background video is a better fit.
I’ve tried to implement @DFink’s advice, but the video bleeds in both axis. That doesn’t make sense to me even in a cover context. Don’t you think, @flowpros?
https://preview.webflow.com/preview/asafs-stunning-project?utm_source=asafs-stunning-project&preview=1a9d33f813738626d630672a0c94234a
1 Like
If anyone runs into this problem, I got a solution from Micah at Webflow Support.
Here it is:
I was able to create a clone of your project, and used your background video file (we suggest you host your file externally, as it would be easier to locate and manage) to create a custom coded video player that automatically plays: https://asafs-stunning-project-video.webflow.io/
You may access the Read-Only link at the following URL: https://preview.webflow.com/preview/asafs-stunning-project-video?utm_source=asafs-stunning-project-video&preview=7e798dabd95bd34b8e2511a09b2b0c01
The following short screencapture notes the process to implement this video player: Screen Recording 2019-02-28...
In case the video is no longer available, the idea is to use HTML element instead of a video background element with the following code:
<video playsinline autoplay muted loop width="100%">
<source src="https://uploads-ssl.webflow.com/5c76928fdcc2cc846da01c10/5c76928fdcc2cc303ba01ef6_Create Capsule Seth-transcode.mp4" type="video/mp4">
</video>
Make sure to replace the link to the video in the code above (next to “src=”).
Good luck, and thanks Micha!
3 Likes
This is great and works if your code example is pasted into my website HTML code with DIv block as it seems you file is hosted on Webflow which I can’t do… However, I cannot seem to get it to work with hosting on Youtube or Vimeo. Any ideas why?
Very frustrating basics. Functionality should have been thought about and built into Webflow when the background was implemented.
1 Like
I am in the same situation. I cannot think of any situation where a professional project would include video posted on youtube. The branding, the recommended videos. The tow video components only force designers to purchase Wista or other pricy video hosting solutions.
4 Likes
Magic, thanks…(post must be blah blah blah characters)
You are my lifesaver. Thank you!!!
this code is a huge life saver! can you help me figure out where to find my video code?
So a responsive contained autoplay video element is not doable unless i upgrade and use custom code is this still the case?
It seems like webflow didn´t even think of this. That does not make want to upgrade slash trust in learning the platform.
I better wait and see how many things like this i come across.
1 Like
Hey @jhiggins, how did you upload an mp4 to your Webflow assets?
1 Like
Hey @dankanvis - You can upload a background video, then grab the URL to the asset after it is rendered. You can then use it in custom code.
@webdev Awesome, that’s works perfectly. Thank you!
This is great, thank you!
@flowpros I found adding this inside <head> tag as custom code does the trick of 'contain’ing for background videos:
<style>
video {
object-fit: contain !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
</style>
2 Likes
great solution. Thank you!
This is awesome! Was looking for this exact thing. Cheers
Wistia has customization options to embed a video that allows for autoplay, and looping, on mobile, as long as you set the video to MUTE in the Customization controls. https://wistia.com/
This is EXCELLENT! I do need to make one adjustment though if possible. Using this method, could I include the pause button? Even better would be if I could include audio. I can’t do it through the regular method because I don’t want my personal youtube channel attached.
Here is my Read Only link in case it helps!