How to setup Fullwidth Video Background with DIVI and FFMPEG

2018-09-16 416 words 2 mins read

Prepare to upload a small video as a background.

I found a video on my mobile phone, taking a picture from New Zealand's famous Lake Tekapo to Wanaka.

But there are some noises.

This requires video processing software to remove the sound.

Ok, let's install the free and powerful ffmpeg.

Windows users can install  a software Winff. Is a visual interface to the ffmpeg command line.

I am using Ubuntu 18 now. Need to run the following command to install ffmpeg

sudo add-apt-repository ppa:kirillshkrogalev/ffmpeg-next

sudo apt-get update

sudo apt-get install ffmpeg

Ok, ffmpeg is installed, the video file I just downloaded is 1.mp4 and I continue to run:
ffmpeg -i \path\1.mp4

Find a few lines with stream information. Here is:
Stream #0:0(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, mono, fltp, 95 kb/s (default)
creation_time : 2018-04-22T22:10:00.000000Z
Stream #0:1(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 960x540, 1803 kb/s, 30.22 fps, 30 tbr, 90k tbn, 58 tbc (default)
creation_time : 2018-04-22T22:10:00.000000Z

This can be seen that 0:0 is audio, 0:1 is video, now run the following statement, just import the video to the new file 2.mp4
ffmpeg -i \path\1.mp4 -map 0:1 -vcodec copy \path\2.mp4

Ok, this silent video is produced.

This video exceeds 2MB, which is beyond the default file size of WordPress.

We use the SCP command to pass it to the server.

scp \path\2.mp4

Then use SSH command to log in to the remote host and put the video in the root directory of the website.

sudo mv 2.mp4 /var/www/

Now let's start Divi to change the home page.

Click the FullWidth Header setting. Select the background to the video just 2.mp4

Also choose a background image for mobile devices.



Then go to the design column and open the full screen.

Ok, save it and feel it. A little dizzy, the speed of shooting this video was too fast.

Then Google finds the solution, source

Run the following command to move the video 4 times slower

ffmpeg -i 2.mp4 -vf "setpts=4*PTS" 21.mp4

The video size has suddenly increased to more than 4MB. It maybe make the website too slow. Use the cut command to cut off most of the time.
ffmpeg -ss 00:00:06 -i 21.mp4 -to 00:00:16 -c copy -copyts 22.mp4

This 22.mp4 is less than 2MB. Ok, upload the test.


Goto Pingdom's test, it seems that the speed of the website has not been greatly affected.






Authored By Jesse Lau

A freelancer living in New Zealand, engaged in website development and program trading. Ever won 1st ranking twice in the Dukascopy Strategy Contest. This article is licensed under a Creative Commons Attribution 4.0 International License.

We notice you're using an adblocker. If you like our webite please keep us running by whitelisting this site in your ad blocker. We’re serving quality, related ads only. Thank you!

I've whitelisted your website.

Not now

Post Your Comments Here:

Our website uses cookies to improve your user experience. If you continue browsing, we assume that you consent to our use of cookies. More information can be found in our privacy policy Got it