Optimising video clip for website?

Can anyone advise me as to best practices for optimising the clip, and should I have one for desktop and a separate file for mobile?

For best delivery experience for all devices, yes.

When you upload a basic video to YouTube they re-encode it in a bunch of different formats and bitrates to do offer the best formats/sizes/compatability between various devices.

ID  EXT   RESOLUTION FPS CH │   FILESIZE   TBR PROTO │ VCODEC        VBR ACODEC      ABR ASR MORE INFO
sb2 mhtml 48x27        1    │                  mhtml │ images                                storyboard
sb1 mhtml 80x45        1    │                  mhtml │ images                                storyboard
sb0 mhtml 160x90       1    │                  mhtml │ images                                storyboard
139 m4a   audio only      2 │  858.64KiB   48k https │ audio only        mp4a.40.5   48k 22k low, m4a_dash
249 webm  audio only      2 │  862.97KiB   48k https │ audio only        opus        48k 48k low, webm_dash
250 webm  audio only      2 │    1.09MiB   62k https │ audio only        opus        62k 48k low, webm_dash
140 m4a   audio only      2 │    2.23MiB  127k https │ audio only        mp4a.40.2  127k 44k medium, m4a_dash
251 webm  audio only      2 │    2.16MiB  123k https │ audio only        opus       123k 48k medium, webm_dash
17  3gp   176x144     10  1 │    1.32MiB   75k https │ mp4v.20.3     75k mp4a.40.2    0k 22k 144p
160 mp4   256x144     15    │    1.85MiB  105k https │ avc1.42c00c  105k video only          144p, mp4_dash
278 webm  256x144     15    │    1.85MiB  105k https │ vp9          105k video only          144p, webm_dash
133 mp4   426x240     30    │    4.13MiB  235k https │ avc1.4d4015  235k video only          240p, mp4_dash
242 webm  426x240     30    │    3.66MiB  209k https │ vp9          209k video only          240p, webm_dash
134 mp4   640x360     30    │    9.10MiB  519k https │ avc1.4d401e  519k video only          360p, mp4_dash
18  mp4   640x360     30  2 │ ~ 11.58MiB  645k https │ avc1.42001E  645k mp4a.40.2    0k 44k 360p
243 webm  640x360     30    │    6.66MiB  380k https │ vp9          380k video only          360p, webm_dash
135 mp4   854x480     30    │   17.20MiB  980k https │ avc1.4d401f  980k video only          480p, mp4_dash
244 webm  854x480     30    │   11.42MiB  651k https │ vp9          651k video only          480p, webm_dash
22  mp4   1280x720    30  2 │ ~ 74.82KiB    4k https │ avc1.64001F    4k mp4a.40.2    0k 44k 720p
136 mp4   1280x720    30    │   34.15MiB 1946k https │ avc1.4d401f 1946k video only          720p, mp4_dash
247 webm  1280x720    30    │   21.13MiB 1204k https │ vp9         1204k video only          720p, webm_dash
137 mp4   1920x1080   30    │   66.11MiB 3767k https │ avc1.640028 3767k video only          1080p, mp4_dash
248 webm  1920x1080   30    │   37.87MiB 2158k https │ vp9         2158k video only          1080p, webm_dash

When a mobile phone or web browser requests page the youtube app or embedded web player figures out the capabilities of the device playing video and tells them which stream from the list to play. This also lets them do neat things like offering high efficiency codecs like AV1 but only to clients that have hardware decoding capabilities (otherwise it stutters and plays terribly). Or probing for things like hardware support of HDR and giving an HDR stream to the few clients that support more advanced color/brightness.

Your video just dropped on a webserver will likely be served as a progressive download or at best pseudo-progressive if you setup an embedded player for it -- you have to basically download the entire video before scrubbing the timeline. It doesn't stream the video, it just downloads it like a regular file and displays it in an embedded video player if you set one up. For a tiny file this is probably fine, but for longer/larger files this gets clunky. A YouTube video you can start playing and immediately scrub/skip through the timeline and the player quickly catches up without downloading the whole video.

Furthermore, Content Delivery Networks (CDN) that provide video streaming services and video streaming platforms like YouTube deploy local storage and edge servers all around the globe, so requests from clients get served as close to the client as possible for better network performance.

Why do you want to host your video yourself, ignoring edge servers, streaming protocols like RTMP, multiple codecs, multiple bitrates vs leveraging something that will do it better with less work?

Is .mp4 the best format?

MP4 is a container, not a codec. Its just an envelope that could contain all sorts of different video types. Is it a fine container for web delivery? Yes.

Should I be using any particular setting or type of compression?

Everybody will probably have their own opinion on this. My opinion if you are determined to go your own way, h264 is the most widely supported web delivery codec, encode that down to a low 5-10Mbps (assuming 1080p). If the file is small enough it might not be too painful. If you aren't determined to do video delivery work for the best viewer experience and there are no reasons prohibiting it I'd just serve an embedded YT video. Serving reliable online video takes a lot of work -- I have been employed by a few CDN's and have seen how the sausage gets made.

/r/VideoEditing Thread