The background video for our hero section is a self-hosted MP4 video. It plays on desktop, tablet, and Android devices. However, it seems that the video is not playing on iOS/iPhone.I’m completely at a loss, and I’ve looked at several posts on the subject and can’t seem to find anything that has worked.
I don’t have any iOS devices to test with, so I’m having to reach out to colleagues to test, which is a little tedious, so I’m hoping I’m just missing something obvious.
I don’t have an iPhone to check that, let me reach out to a colleague (we all work remotely) and see if that is something they have turned on - thank you for the help!
My colleague came back to me like 3 minutes after your reply, and it is still not working on iPhone. I have tested the website on two Android devices, and it runs perfectly on both of them. One of these devices is an older Android 7 phone, which, as mentioned before, plays the background video without any problems.
Unfortunately, we’re still having the same issue of the video not playing on iOS, although it is still playing on every other platform and device (go figure). Any further advice or guidance would be super appreciated.
Hi Markus,
It could be because the video has an audio track (without sound, but iOS doesn’t know that).
Please remove the audio track completely in a video editor of your choice and see if it works.
In my test, it works fine with the same video (after removing the audio track). Side note: Do you really want to use a 27MB video as background video?
I can tell you what worked for me, what i did was this disabled autoplay of videos on your iPhone, depending on what you’d like to control. Here are two ways to do it:- 1. Stop Auto-Play Video Previews:- This setting applies to most apps and websites that show video previews. Here’s how to turn it off:-
Open Settings.
Scroll down and tap on Accessibility.
Tap on Motion.
Find the toggle for Auto-Play Video Previews and turn it off.
2. Stop Autoplay in Specific Apps:- While the above setting works for most scenarios, some apps like YouTube might have their own autoplay controls within the app itself. You’ll need to check the app’s settings to disable autoplay there. Here’s an example for YouTube:-
Open the YouTube app.
Tap on your profile picture in the top right corner.
Select Settings.
Go to Playback.
Under Playback in feeds, choose Off.
You can also disable autoplay for the next video in sequence by toggling off the Auto-play next video option under Playback.
By following these steps, you can gain more control over video autoplay on your iPhone.
Follow for more informatics assistance below.
for sure that worked
To improve compatibility, particularly with Chrome on mobile, consider using a combination of click, touchstart, and touchend events, and possibly including a small delay before trying to play the video. Here’s an enhanced version of your code:
// Listen for both click, touchstart, and touchend events
$('body').on('click touchstart touchend', function() {
playVideoOnInteraction();
// Optionally, unbind the event after the video starts playing
if (document.getElementById('home_video').playing) {
$(this).off('click touchstart touchend');
}
});
});
touchend Event:
Added touchend to the event listener. In some cases, Chrome might respond better to touchend rather than touchstart because it ensures the touch gesture is complete.
Handling Autoplay Restrictions:
The .catch(function(error) { ... }) block catches any errors that occur if Chrome or another browser prevents autoplay, providing feedback in the console. You can also use this to display a message to the user if needed.
Enhanced User Interaction:
By responding to both touchstart and touchend, the script increases the chances of being considered a valid user interaction across different browsers, including Chrome.
Hi
I too am facing the same issue but the video I added don’t have any soundtrack but still in Iphone its not playing.
The video however is playing in all android,desktop and even in MacBook only IPhone is giving issue.
Can someone please look into this?
.
