How to Fix the Autoplay Video Not Working in Elementor

The Issue

Are you facing this issue on your Elementor website? – your video is supposed to auto-play when it’s opened in a Chrome browser or a mobile browser, but the video is not auto-playing.

You have tried everything including changing the source of the video from YouTube, Vimeo, Dailymotion, or self-hosted.

I’ll help fix the video widget not auto-playing when the page is loaded. This is a common issue faced by many WordPress Website Designers. There is a simple fix to the issue.

Possible Solutions

Following are possible solutions/fixes to resolve the video not working or auto playing in your Elementor website

The 1st Fix

Disabling the Image Overlay

Disable the Image Overlay option. Do not add any image overlay to the video. As shown in the image below, make sure that the Image Overlay button is showing “hide”, which means that there is no image overlay and it is hidden. We have noticed almost every time that, whenever we added an image overlay the video did not auto play.

Disabling Image Overlay on Elementor Video widget.

The 2nd Fix

Enabling the Mute option

The second and the most impotent fix is to enable the Mute option in the Elementor Video Widget. This definitely works because some web browsers especially Google Chrome have autoplay video policies and rules (read Google autoplay policy here). To override this you will have to mute your video.

Enabling the Mute option on the Elementor Video widget.

The 3rd Fix

Enabling the Player Controls

Enable Player Controls option in the Elementor Video Widget.

Enabling the Player Controls in the Elementor Video widget

The 4th Fix

Even after trying the above three fixes, if your Elementor Video Widget is still not auto-playing then you may try using a different video widget from a add-on plugin like JetElements etc.

The 5th Fix

If nothing is working, then there is a very clever workaround, however, this workaround does not work in every case. This workaround uses the background video option from a container/section. Here is a step-by-step process:

  • Add a container/column.
  • Add a space in the container/column.
  • Select the container and add a video background using the video link.
  • Set a minimum height to the container or increase the height of the Spacer Widget.

This workaround sometimes causes the video to look small because of different screen resolutions, so you will have to play around a little bit with the height of the Elementor Container or the Spacer Widget.

If you have found another solution to fix the video not playing in your Elementor website then let us know, we would really appreciate that.