Over the past few months I have been trying to solve a mystery with one of our websites we redesigned a few years ago using the Wix Editor for our client RPM Ventures, a Venture Capital firm in Michigan.
Houston….We Have a Problem Displaying Background Videos in Wix
We created a custom video for their homepage that draws in and engages the users as they enter the site. However after a few years we noticed that the background video, which we had set up as a video background in a strip in the Wix Editor, was not automatically playing on some tablet and mobile devices. Specifically we were having trouble playing it on Apple iPads and iPhones. What made the matter even more confusing is the background video was playing on some iPads and not playing on others. And there seemed to be no rhyme or reason as to why it was playing. We even tested on identical iPads with identical IOS versions and it worked on one and not on the other. What the heck?
Seeking Help When You Know You’ve Hit a Roadblock
Finally after consulting many different customer support representatives at Wix (over several months), we figured out the problem; it’s not actually a video issue, but it has to do with an accessibility setting on the iPad or iPhone itself. It turns out that when “Reduce Motion” was enabled on an iPhone or an iPad, the background video did not play. But if the “Reduce Motion” setting was disabled on an iPhone or iPad, the background video plays perfectly.
Because this is a user controlled accessibility feature, as a web developer or designer this perceived “error” is out of your control. It’s actually working as it should for users who decide they want to see less motion, whether this be a personal preference or because of a disability.
Solutions to Display a Background Video on iPads and iPhones Using the Wix Editor
While there is no quick fix to this clashing settings and video issue, there are some solutions that allow you to creatively still display videos on your website using the Wix Editor.
Solution 1: Change the First Frame of Your Video
Try creating a more engaging first frame on your video. When a background video does not automatically play in the Wix Editor, it will display the immediate first frame of the video. As long as that first frame is relevant and attractive, it may not be a problem if the video does not play because then at least you have an attractive alternative image.
Solution 2: Hide the Background Video Strip in Mobile
You can hide the background video strip on iPhones using the mobile view, but in the Wix Editor you do not have the ability to hide the video on iPads or tablets. In order to control the iPad or tablet view you must convert your website to Editor X.
Solution 3: Place the Video in a Wix Video Player
You can choose to place the video in a video player in the Wix Editor as opposed to as the background in a strip. However, in the Wix Editor you can not stretch the video edge to edge. This means you won’t achieve that same effect visually as if it was displayed in a background strip.
Solution 4: Convert Your Website to Wix Editor X
Convert your website to Wix Editor X, which will allow you to set up a video player that can stretch edge to edge. Additionally in Editor X you are able to choose a “Cover Image” for your video as a backup should your video not display properly. After testing a few times, it seems that whether “Reduce Motion” is enabled or disabled, the video plays fine on iPad and iPhones as long as the video is not in a background strip but in an actual video player.
Solution 5: Convert your Website from Wix to WordPress
While this solution is definitely a more expensive option, in the long run it may save you a lot of time, money and headaches. While many of the newer website creators on the market like Wix, Squarespace or Webflow allow you to quickly get a website up and running with little knowledge of website design or development, they do have their limitations. And eventually, sometimes these limitations hit a breaking point.
If that is the case, it may be time to consider converting your website to a more robust and flexible content management system such as WordPress. When working with a website designer to build a custom website, you have nearly infinite options for creating the perfect display solutions for mobile, tablet, and desktop environments as well as getting ahead of issues with accessibility.
This is a perfect example of how a seemingly small issue can quickly turn into a large problem, sometimes taking hours to solve. What I also learned is that sometimes it’s just luck as to which support representative you get on the phone or chat. No one can possibly know everything, and I finally got lucky to get a wonderful representative at Wix that must have seen this video issue before and was able to identify the solution immediately.
It’s a good lesson for us as website designers and developers and our clients as well. Patience and perseverance is critical when designing a website and maintaining a website. With constantly changing technology in devices, web browsers, and content management systems it is unrealistic to expect a web developer, designer or even a customer service representative to know every possible solution. The key is finding a developer or web designer that knows how to troubleshoot properly and use critical thinking to solve even the most confusing problems.