Header video will not load on mobile

My video loads on the desktop, and iPad, but not on my iPhone.
If I send a link directly to the video on my iPhone, it plays just fine, just not within the template.
Any ideas?
https://www.amarshah.org/sopo/

Thank you.

Hi,

Thank you for contacting us. I am happy to help with your queries.

I’d like to inspect the issue directly with iPhone. However, the link you share couldn’t be opened. Did you share the correct link? Or, is there any specifc IP restriction applied on your server end?

Regards,
Kharis
aThemes Support

I put https by accident. It is: http://www.amarshah.org/sopo/

I also found if I add this code:
@media only screen and (max-width: 1024px) {

.wp-custom-header {
background-image: url(http://amarshah.org/sopo/wp-content/uploads/2021/03/sopo-1920_6.mp4) !important;
height: 300px !important;
}

It shows a part of the video, but it is covered by the black background from the top.

Hi,

I checked your page and the header image is currently active. This prevents me to check the reported issue with the header video.

Do you still need help with the video header?

Regards,
Kharis
aThemes Support

I read that mobile browsers are automatically blocking the auto play of videos, so I replaced it. Thank you for trying to help.

1 Like

That’s indeed true.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support