Enable autoplay for videos
Andrei N avatar
Written by Andrei N
Updated over a week ago

Background Video

You can autoplay videos on your website by using the background video feature on any module.

For example, you can use Divider module. In the Content settings of the module, select the following option and upload the video file, the supported formats are mp4 and webm:

Background video is not the primary point of the module, it will just cover the module and visible part of video, depending on the size of the module. 

To display a bigger part of your video, you can adjust the width and height of the module in Design settings:

HTML5 Video

Another option to enable autoplay for videos is using HTML tag <video> . In this case, the size of your video will depend on the width of the column or module while keeping aspect ratio of the original video, so it won't be cropped.

At first, upload the video file to your WordPress Media Library. 

Next, place this HTML code in the Code module:

<video width="100%" playsinline controls loop muted autoplay>

<source src="video_example.mp4" type="video/mp4">

</video>

In 2nd line of code you will need to replace this text 

video_example.mp4

With your video file that you uploaded, full path of video file can be seen in the Media Library:

Copy the full path and replace video_example.mp4 in code. 

In the 1st line of the code you can see a few parameters which you can remove if you do not need that particular feature.

playsinline   - allow video to play on the page without opening fullscreen mode, mobile devices are often playing videos in fullscreen mode by default.

controls  - shows video player controls such as volume, play/pause buttons, etc.

loop - it will loop your video so it will play without stopping. Without this parameter, the video will play only once.

muted  - will mute video by default, video can be unmuted in case the controls are enabled. This parameter is important for autoplay since most of the browsers will not allow to autoplay videos in case they have sound and it's not muted by default.

autoplay - will play the video after the page is loaded.

Did this answer your question?