Cutting and converting a (Youtube) video to use as background banner

Sometimes I need to get a specific part of a youtube video to use as a video background on a website. It should autoplay and run in most browsers if possible.

After trying different approaches I settled for youtube-dl and ffmpg because it takes only a couple of seconds and the video works in all tested browsers. When I used some GUI tools or even VLC sometimes the video didn’t work in one browser or the other and debugging it is an absolute pain.

First of all I use youtube-dl to just download the video – no operators, options etc. You can of course modify this, especially if you only need 720p etc.

Then I cut the video with ffmpg and the -ss option. It looks like this:

ffmpeg -ss 50 -i input.mp4 -t 10 -c copy output.mp4

What this does is it will begin at position 50 (seconds) in the video and cut it after 10 seconds. So in this example I will get a 10 second portion of said Youtube video that begins on the 50 second mark. This can be done to any video and isn’t limited to youtube of course…

After that I convert it to h264 and remove the audio portion as this works in most browsers and also enables autoplay – which some browsers otherwise block if there is an audio available in the video (even if you disable it via code). So removing it altogether is the safe option.

ffmpeg -i input.mp4 -vcodec h264 -an output.mp4

And that’s it… enjoy your video background.