Video Not Auto Playing on Some Browsers

[gunesinan]

Hi,

I use a video element and use .mp4, .mov and .webm video files as the player source, however, on Safari and DuckDuckGo browsers, I have to click the video to play, the video does not autoplay with page load. The autoplay checkbox is clicked on the video element, and preload is set as metadata or auto.

On Chrome and MS Edge, I am having no problems, the video autoplays.

Could it be due to the codec of the video? I use handshake to convert the videos to mp4 h.264.

Thanks in advance for your help.

Gunes

[tristup]

Hi Gunes,

Thanks for reaching out.
As per the browser’s Autoplay Policy Change, if Autoplay is enabled, you need to Mute the video.

Thanks

[gunesinan]

Thanks for the quick response tristup but the video was already muted. See the screenshot below.

[nabeel]

Hey Gunes,

You can set this video as a background video of a section instead, that should do the trick.

Let us know how this goes!

[gunesinan]

Thank you @nabeel,

Yes, it did the trick! Thank you so much!

I have one more question, if you do not mind. This is the first time I embedded a video in the background and realized there is no horizontal position setting (e.g. left, center, right). What happens is; on mobile devices, the video is aligned to the left, but on a computer, it is centered if I shrink the window. Is it possible to center the video on all devices? Do I need CSS to override the position setting on mobile devices? Thanks in advance!

[ruenel]

Hey Gunes,

Please check out this old thread:

• Center background video on desktop and mobile - Support - Themeco Forum

Thanks.

[gunesinan]

Thanks @ruenel,

To make his code work, should I place the code inside the page CSS box or element CSS box (with or without $el.)? Such as:

$el.x-video.bg {
top: 50% !important;
left: 50% !important;
-webkit-transform: translate(-50%,-50%) !important;
-ms-transform: translate(-50%,-50%) !important;
transform: translate(-50%,-50%) !important;
}

I couldnt make it work and would appreciate your help.

Thanks.

[tristup]

Hi Gunes,

You need to add this code to the Element CSS of that element in which you have set the Background Video.

Hope it helps.
Thanks

[gunesinan]

Thanks, @tristup, but I think I am not able to point it properly, I tried

“$el. {…”,
“$el.x-video.bg {…”, and
“x-video.bg {…”

but none of them is working. Which one should I use?

The css is in the element css box of column element where there video is at the background.

Thanks

Gunes

[tristup]

Hi Gunes,

There should be a space between $el and .x-video.bg and your code should look like the following.

$el .x-video.bg 
{
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50%,-50%) !important;
    -ms-transform: translate(-50%,-50%) !important;
    transform: translate(-50%,-50%) !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks