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.

[skinpores]

Hi! Sorry for such a long delay in getting back you on this. Hope it’s not too late to pick this up…

Our videos are actually not background videos and they do not have audio. Does that mean it’s probably for the best that we do not use Youtube or Vimeo then?

Sorry we didn’t include a link to the site, as we initially thought our questions were general/minor.

Two different examples of videos on the site:
Example 1: Next Episode Refresh | Case Study
If you scroll to about half way down the page to section 1.5, there are 2 comparison videos. The user is suppose to click on only the corresponding ‘click to play’ button to play the video behind it. Right now we are pretty stuck on correcting that. Would you recommend we use Vimeo/Youtube/other solutions in this case?

Example 2
https://ep-portfoliowebsitev2.webflow.io/works/next-episode-redesign-preview
This is the video that we struggled to make it size-appropriate for different breakpoints. We are figuring our way out with your solution 1. Wondering if this may be best with Youtube/Vimeo as well?

We are very unfamiliar with optimizing videos in general and with Handbrake. Would you be able to provide a bit more guidance on other settings we should be adjusting to optimize the videos please?

Thanks so much and looking forward to your input!

[Fonsume]

Example 1 is working like a charm for me. What’s the problem here?

And for example 2 you already have the solution. Just add the div with the video background a few times and hide/show at the appropriate sizes for the appropriate breakpoints.

30MB for these videos sounds extremely large though, are you sure you’re hitting the limits here? In example 2 the video is just 1.8MB which I could easily compress to half that.