Encode video for background html5 video

Encode video for background html5 video.md

Install ffmpeg with ALL includes

brew install ffmpeg $(brew options ffmpeg | grep -vE '\s' | grep -- '--with-' | tr '\n' ' ')

Cut video from 00:00:43 sec to 00:00:58 sec (15 sec duration).
Resize it to 720p.
Max quality options, but small size.

MP4

With audio:

ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf scale=-2:720 -b:v 2M -c:a libfdk_aac -b:a 128k -movflags +faststart dest.mp4

Without audio (preffered for video bg):

ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf scale=-2:720 -b:v 2M -an -movflags +faststart dest.mp4

You could try 2-pass:

ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf scale=-2:720 -b:v 2M -pass 1 -an -movflags +faststart -f mp4 /dev/null && ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf scale=-2:720 -b:v 2M -pass 2 -an -movflags +faststart dest.mp4

Facebook cover (2-pass):

ffmpeg -ss 00:00:00 -i source.mp4 -t 00:00:57 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf "scale=-1:462, crop=820:462" -b:v 2M -pass 1 -an -movflags +faststart -f mp4 /dev/null && ffmpeg -ss 00:00:00 -i source.mp4 -t 00:00:57 -c:v libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -preset veryslow -vf "scale=-1:462, crop=820:462" -b:v 2M -pass 2 -an -movflags +faststart dest.mp4

WEBM

With audio:

ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libvpx -vf scale=-2:720 -crf 10 -b:v 2M -c:a libvorbis dest.webm

Without audio (preffered for video bg):

ffmpeg -ss 00:00:43 -i source.mp4 -t 00:00:15 -c:v libvpx -vf scale=-2:720 -crf 10 -b:v 2M -an dest.webm

You should set -b:v 2M for webm! Or your max bitrate will be low.

How to remove sound

ffmpeg -i dest.mp4 -c copy -an dest-nosound.mp4
ffmpeg -i dest.webm -c copy -an dest-nosound.webm

Prepare "video-bg.jpg" poster with screenshot of video as fallback

ffmpeg -i dest.webm -ss 00:00:00.000 -vframes 1 video-bg.jpg

HTML

Video will not autostart without "muted" property in Chrome and also without "playsinline" on iOS!

<div class="header">
  <div class="header__video">
    <video class="video-bg" autoplay playsinline muted loop poster="img/video-bg.jpg">
      <source src="video/intro.webm" type="video/webm">
      <source src="video/intro.mp4" type="video/mp4">
    </video>
  </div>
</div>

CSS

.header {
	position: relative;
	height: 690px; // anything below 720 and more then 480 (you should resize to 480p if smaller)
}

.header__video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #000;	
}

.video-bg {
		opacity: .5;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);		
		object-fit: cover;
		object-position: center;	
		width: auto;
		height: auto;
		min-height: 100%;
		min-width: 100%;
		background-size: cover;			
		background: url("../img/video-bg.jpg") center center no-repeat;
}