Background Video Loss of Quality on Upload

Design help General
1

Hi All,

I have uploaded a high quality MP4 video which is less than 30mb to Webflow. However there is a substantial loss in quality after trans-coding. Is there anyway to keep the quality?

Or are there any other ways to show the original video in high quality. I have tried the Dropbox method but only works in preview. It won’t work on a published site.

I appreciate any help.

Thanks a lot.

Niall

2

30mo can either be a short and small size video that is lightly compressed (best case scenario) or a long and big size video heavily compressed. Latter case can lead to a non ideal result to to recompression of an heavily compressed video.

Note that the video feature offered by Webflow is a “background video” one, not a video player one. Difference is the bg video is used as a decor for somethingelse and the quality is of secondary importance, bg video are often overlayed by a texture, or with washed out colors, or very short with a loop…

If you want to show a very nice video, you rather need a video player, so a HTML5 video technique (custom ccode) with a MP4 video hosted somewhere. As long as the url of the video works by itself in a browserr, the code will work.

So yes we recommend you use custom code if it’s your case.

Can you share the custom code you’re already using and that works in Preview? As well as the url of the page, and your site’s read only link.

1 Like
3

Thanks for the reply.

My embed code was:

This worked in preview but not when published.

https://preview.webflow.com/preview/ripple-marketing-2?utm_source=ripple-marketing-2&preview=abe1c5673ed26a236515257d4dd76c23

Thanks,

Niall

4

It’s not letting me paste the code so here is a screenshotscreenshot

5

Just bumping this. Thanks

6

Hi @Niall_Mc_Dermott,

@vincent made a good point, background video do not aim to showcase the best quality.
On which page of your project did you use the custom HTML5 code ?

As for videos being hosted on dropbox, I am not sure it is the optimal solution.
I use Cloudinary to host external assets, especially videos (loads surprisingly fast).
Cloudinary has a free plan to get your started: Cloudinary - Pricing and Plans

A good alternative would be for you to host your video on vimeo instead.
You could then inject the video source path into an HTML5 video tag.
The better way would be to construct the player on page load with javascript via the vimeo player API.

That way, you have total control over the video, the way it plays, responsiveness, quality etc…
I did that before and it works like a charm, keeping your HTML embed clean (no preview in the webflow designer however).

Edit:
Also, your poster image path doesn’t lead to a valid image. For a video to autoplay, you need to add the muted attribute aswell (to autoplay on some mobile devices).

1 Like
7

Thanks for the reply. I set up a paid vimeo account and tried embedding it but won’t fill the screen and can’t get rid of controls. Also it won’t autoplay or loop. I have tried a few methods I have seen online.

Cloudinary is way too expensive and doesn’t look like it will work.

Are there any other solutions?

Would you have sample code for this?

Thanks,

Niall

8

I can’t make the vimeo video responsive and takes a long time to load:

9

Hi @Niall_Mc_Dermott, it might be that the video is not web optimized, I would first take the source video and optimize that using the excellent Handbrake tool at https://handbrake.fr.

Export the video to web optimized .mp4 with 30 fps and then upload the resulting file to Webflow.

I hope this helps

10

Hi Dave,

Thanks for the reply. I tried this but the quality wan’t improved.

Niall

11

Hi @Niall_Mc_Dermott,

yes, here is what I meant with the vimeo player API constructor:
https://codepen.io/anthonysalamin/pen/NVJBxq?editors=1011

Simply create a Webflow custom component, paste the html inside, add the css style aswell. Then, before the end of the tag, past the javascript snipet. You should be able to enjoy full screen video harnessing the power of vimeo HD streaming.

Hope that helps.

12

Hi Anthony,

I tried that and I get this.

screenshot
screenshot1366×695 165 KB

Thanks,

Niall

13

Ho,

before the </body> tag, you need to wrap the javascript within its <script> tag like so:

<!-- Vimeo player API -->
<script src="https://player.vimeo.com/api/player.js"></script>

<script>
// javascript
</script>

For the css inside the custom embed, you need to wrap it within its <style> tag like so:

<style>
/* css */
</style>

then comes the html markup:

<div class="aspect_ratio">
   <div class="vimeo" id="336048219"></div>
</div>
1 Like
14

Thanks but this didn’t work. I’m about to start a web project which requires decent quality background video. I’m thinking of using Wordpress as Webflow only has low quality BG video. Is there still no workaround?

Cheers,

Niall

15

Hi @Niall_Mc_Dermott,

Did you try to replace the /* css */ with your actual css code ?
Regarding Webflow background video quality, I find it pretty powerful - would you have some screenshot comparison for us to look at ?

16

Thanks for the reply.

Yes, I tried that. I put in the before body code and the full code I used in the embed was:

.embed { width: 100%; height: 100%; }

Yes, here is a website where I have native bg video: https://www.ripplemarketing.ie/

There is a lot of degradation in the quality after upload. I’ve seen high quality video on Wordpress. Eg: http://ankkavalladolid.com/ Home - Default - Salient Agency

Thanks

17

Hi @Niall_Mc_Dermott nill,

If you actually have only one video, you could try implement the solution below.

create an embed and copy the HTML code:

<div class="vimeo-wrapper">
       <iframe src="https://player.vimeo.com/video/76979871?background=1&autoplay=1&loop=1&byline=0&title=0"
               frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

then copy the css inside the page custom code after the <head> tag

.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

as seen on this codepen

18

Thanks a million. :slight_smile: That worked perfect. I appreciate the help

19

This actually doesn’t work unfortunately. In IE there is a horizontal scroll and when I try and add anything to the page, I get a horizontal scroll in Chrome.

Would you have any other suggestions by any chance?