Making video responsive - options besides Youtube and Vimeo?

[skinpores]

We have been using Webflow’s background video as a temporary solution/placeholder in the past. Our videos are getting larger than the max file size the background video function would permit. We read that video hosting options are Youtube and Vimeo.

Our videos has odd aspect ratios (there’s a reason for that), though we can add more background to make them more of a standard aspect ratio that would look nice on desktops and laptops. For mobile portrait, we also don’t mind if the background gets cropped on the sides since the main content is in the center.

We read something about embedding video ourselves. But we are pretty confused on the whole video on website topic after reading some of the other posts and solutions on here…Sorry!

Are there other (simple) solutions to include >30MB videos on a website if we don’t want to use Youtube or Vimeo? We got about 7-8 short (max 3 minutes) videos and on a tight budget, so paying a premium plan for Youtube or Vimeo to eliminate the extra graphics of the video player isn’t ideal for us.

[ollebrickarp]

Hi!

If I understood your question correctly you’re asking about two separate things? 1) You want to make the videos responsive and 2) you want to include files larger than 30Mb?

1 Responsive videos

Add one Video background for each breakpoint you want to target and give each a unique class based on that breakpoint. Then show/hide them in the correct breakpoint. I did this example earlier, it used images but the same can be achieved with video backgrounds (simply replace the image with a background video).

https://preview.webflow.com/preview/image-loading?utm_medium=preview_link&utm_source=designer&utm_content=image-loading&preview=e79e4ee43a2b5cc54818128b29157702&mode=preview

2 Upload larger files

Here I would strongly recommend to not use videos of this size. Instead you should try to optimize the videos yourselves before uploading them. The easiest and cheapest way to do so is with Handbrake. Remember to also remove the audio track in Handbrake, if you have any. Audio will never play in background videos. Also remember to scale the videos to fit the correct screen size.

Embedding Youtube videos

If the videos are meant to be played with sound and triggered by the user you can use Youtube. You shouldn’t need any payed account to upload them there if that’s simply what you need. The videos will be optimized automatically.