All Collections
FAQ's and Troubleshooting
How to Fix the Missing Video Background Error
How to Fix the Missing Video Background Error

Learn how to fix and troubleshoot common causes for video background not rendering on the front end.

Mayur avatar
Written by Mayur
Updated over a week ago

There can be a few reasons why a video background may not work.

To troubleshoot the problem, follow the following steps.

Ensure that the video files are correctly encoded for the web

  1. Go to your WordPress Dashboard β†’ Media β†’ Library

  2. Filter the File types to only display Video

  3. Find the Video file used as the Video Background and click on it.

  4. Click on the Copy URL to Clipboard to copy the video file's URL

  5. Open a new Browser Tab

  6. Paste in the browser's address bar the URL of the video file (copied at step 4)

If the Video file plays without any issue in the browser, it has been correctly encoded for the web.

If the Video file doesn't play, it has to be correctly encoded for the web. To re-encode the video file, you can use free tools such as MiroVideoConverter or HandBrake.fr.

After the video is encoded using any of the above-mentioned tools, upload the resulting mp4 and webm files to your WordPress website, and replace the old ones in the Element's Content tab β†’ Background β†’ Video Background.

Notes:

  • To ensure good browser compatibility, the video file should be saved and encoded correctly in mp4 and webm formats.

  • When adding a video file as the Video Background, ensure that the correct Width and Height values are set according to the video's size.

Ensure that the server has the correct MIME types defined

For the video formats to work in all browsers, your server must have the correct MIME types designated.

For more information about setting the correct MIME types using the .htaccess file, please follow the Setting up Mime Types on your server guide.

  1. Connect to your FTP server using an FTP client such as FileZilla or the Advanced File Manager WordPress plugin.

  2. Ensure that the hidden files are visible

  3. Find and open in a text or code editor the .htaccess file

  4. After this line of code

    #END WordPress

    Add these lines of code:

    AddType video/mp4 .mp4 .m4v
    AddType video/ogg .ogv
    AddType video/webm .webm
Did this answer your question?