High quality background video

Design help General
1

Hi guys,
I’m having some problems with the background video on my website.

The issue is that the video I upload, which is 1920x975 and HD, appears to be low quality, and it’s bugging me because I really want it to be a very crisp and sharp image, but right now it looks very pixelated and quite bad to be honest.

I really need help on this, thanks in advance!

For reference of what I’m trying to achieve, I’m going for a look that resembles the homepage of this dope website:

Public share link:
https://preview.webflow.com/preview/venture-555ed6-0b4ae95eaa-21c8658aff202?preview=03d9d85b982d44e76ccb805c803048db

Preview of what it looks like right now (as you can see the background video is noticeably low quality):
http://venture-555ed6-0b4ae95eaa-21c8658aff202.webflow.io/

I’m quite new to webflow too so please excuse the poor organisation and layout lol.

2

Hi!

Webflow’s ready made Component for video background is designed in a way to bring a very decent quality with no effort. I’m a video pro and I’ve been comparing their process to my own, manual process, for when I want a video to be as light as possible but still get a decent quality. The result is I can make it slightly better, but so slightly that it’s not worth the extra effort. So I use Webflow’s component very often. most of the time.

Now there are situations where you want a crisp, super quality.

That’s when you need to craft your own HTML5 video element, using custom code. But you’re going to have to manually produce 3 types of videos and a poster, also make a structure with divs in order to have the video centered at all time. That’s work, but that’s what it takes to manually control the quality of your video. Don’t forget to remove sound: the component does it for you but you’ll have to manually do it if you use a custom code component.

I hope this helps.

1 Like
3

Hi Vincent,

Thanks for the reply, this helped a lot.

Guess I’m going to have to teach myself how to craft this in HTML5, should be worth it in the end though. Is there somewhere you’d recommend that I learn this?

Thanks again!

4

Sure.

The term to look for is html5 video (the background aspect is unnecessary) Google*

W3School is always recommendable : HTML Video

I bought an app called EasyHTML5Video and I never regretted the bucks I put in (less than 70) : http://easyhtml5video.com/ Not only itproduces the various videos you need, but it also can produce code ready to embed, and provide more advanced options like playback control using Javascript.

A popular and very good video compressor is Handbrake. It’s not really aimed at facilitating html5 video production but it’s an essential tool to produce lightweight MP4 and other formats, it’s free and for all platforms including Ubuntu. HandBrake: Downloads

1 Like
5

I created what i believe to be a higher quality background video using your preview link. it’s definitely crisper - i’m not fully sure why - maybe something to do with the overflow and resizing of the video - but still not as perfectly crisp as the original video.

i create a div called hero-holder to put hero-section in. this is how i styled the elements then:

.hero-holder {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}
.hero-section {
    position: relative;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 127vh;
    min-width: 100%;
}

give it a shot and let me know how you get on!

1 Like
6

Thanks man! Appreciate this a lot, will give a try later today and let you know.

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.