Background video - What is the best Frame size / Frame rate / Codec / File size?

Question

Please, I need your help. I'm dealing with a background video for our homepage. This section has 100vh and is full-width. I'm using DIVI as a builder.

We hired a professional videographer to record a video for us. Now he asks me what should be the ideal:

• frame size

• frame rate

• codec

• file size

I've done some research and it seems like that the ideals are:

• frame size: 1280 x 720

• frame rate: 30FPS

• codec: I don't know

• file size: the less the better

Please, does anyone have any experience with background video? I'm pretty lost.

Also, would you upload it in the WordPress media library or would you use Vimeo/YouTube? I think you can't use YouTube as a background video, correct?

Thanks a lot!

Answer 1

Frame size: 1280 x 720 (=720p) means HD quality, which is quite good, but it is rather up to you, what quality do you find acceptable. Often 1920 x 1080 pixel (=1080p, fullHD) is used for background videos, like my main background video source is https://coverr.co/ where you can download free videos, specifically made for the purpose of being background videos. Those are 1920 x 1080 big. I would say, if you can ask for multiple files, ask for both, 720p and 1080p quality to be able to make a good decision.

The file size is connected to this, so the smaller frame sized video you will use, the smaller file size you will get.

Frame rate: You could take a look at this image: https://miro.medium.com/max/1300/1*uMlkXIMNF4VIZoi85NZ3aQ.png to see what it means.

Movies on blu ray, dvd and cinema use 24 FPS, so that should be enough for you too. Here as well, the lower FPS means less filesize.

Codec: h264

I'm a WordPress plugin developer and we always suggest this, when our users cannot figure out how to create a video, that plays on all browsers. So far it worked out well for everyone.

YouTube vs Vimeo vs MP4: By default you cannot make Youtube videos to be backgrounds. There are some coding tricks, which might works, but I wouldn't suggest it.

Vimeo only allows background videos for Pro Vimeo users.

Using mp4 is simple, and also it works better in mobile and tablet devices. Some devices are opening up their Vimeo/Youtube applications automatically, when a Vimeo or Youtube video is started on a website. This is quite bad and your page will end up without background.

You should also note, that most browsers (even on desktop) only allow you to play videos automatically, if you will mute the video in the html code: https://www.w3schools.com/tags/att_video_muted.asp

Answer 2

What @Gabor said.

• 1080p (1920 x 1080) is a good resolution for desktop.
• If your user is on a mobile or other small-form-factor device it would be good if you could have the choice of 720p (1280x720) or even 360p (360x640). Those will save data downloads and fit the smaller devices. Look for a plugin that delivers the appropriate size video. You'll need a video file for each resolution.
• Or don't show background video on users' mobile devices.
• In your design think through what will happen in portrait mode. You probably want to clip off the right and left sides of the video material, so the center part fills the screen. So, the action should be in the center.
• Is this video huge? Does it play for many minutes? If not, you absolutely should host it on your own site. Why get involved with, and pay for, some third-party media service if you don't have to? If it's really large (> 10MiB or so) you probably should ask another question and give more details.
• Put no audio tracks in your background video files. Browsers restrict the playing of audio in background video, so there's no need to make your files fatter with audio tracks that won't play. (If you have audio, consider hosting a separate file to send users who click on the video to view it; most users won't.)
• Use .mp4 files with H.264 video in them (one file per resolution). Other stuff, like webm with vp8 video, might generate smaller file sizes. But they don't play in as many makes and models of browser (I'm looking at you, Apple Safari.)
• The video, in H.264 parlance, should be coded in the so-called Constrained Baseline Profile. It saves power when played on mobile devices and works better on slower devices.
• Ask your videographer to give you streaming mp4 files (also known as fragmented mp4): they can start playing as soon as the first frame is downloaded.
• Ask your videographer for advice about file bitrate. Your 1080p files should look decent coded with variable bit rate with a target of one megabit / second (8 seconds per megabyte). Your lower-resolution files will need a smaller bitrate: that's the point of them after all. But, your bitrate may vary. Action/adventure movies need a higher bitrate to look good than do talking heads.
• As @Gabor mentioned, 24 frames/sec should be fine. 15 frames/sec is marginal. Ask your videographer what looks best for the material they created for you. Sometimes material shot at 30 frames/sec looks choppy at 24. (The way H.264 video works, once you get below 24 frames/sec the savings in file size aren't as dramatic as you might guess. 15 frames/sec takes more than half the file size of 30 frames/sec.)