Revolution Slider Background Videos Not Working in Chrome 67
While working on one of my niche websites yesterday I noticed that background videos embedded in revolution slider were not working. I hadn’t changed anything or made any new server configurations. The videos were simply not autoplaying. Two days ago everything was working fine. I’ve incorporated 12 or so videos into separate sliders across as many pages. It’s an important feature that I can’t afford to have broken. The only thing that displayed in place of the video was the youtube generated thumbnail (as selected for a cover in revolution slider).
My immediate thought was that this was a youtube issue. Viewing these pages in MS Edge confirmed that it was not. The videos played as expected. Okay so perhaps Chrome is to blame? I started to do some research on the matter and discovered Google’s autoplay policy is changing. According to their new guidelines, muted videos will still autoplay. All of my videos were marked as muted and thus shouldn’t have been affected. I thought maybe revolution slider wasn’t passing the correct arguments. So I added mute=1 and autoplay=1 to the arguments field in source settings of the slider. No change. I kept researching hoping to find a solution.
Checking developer tools for errors
I probably should have done this sooner. Looking for errors or warnings in developer tools can lead you on the right path to correcting a conflict or problem in Chrome. There was an error that I had never experienced before, and it was present on all of my video pages:
Now I was back to thinking that this was a policy change in either Chrome or Youtube. So I googled that exact error message and came across this post from a user who was experiencing the same error. It looks like he resolved his own issue. Another user who had the same problem also chimed in confirming his fix. It had to do with a css setting for visibility: hidden on one of the video containers.
Now according to Google, Chrome 67 has been released since May 29th. I didn’t have an issue until a couple days ago. Perhaps a minor update in version 67 caused the problem? I even downloaded the beta for Chrome 68. No dice, the problem still persisted. To make matters worse that error message I was getting disappeared completely in the beta! I felt like I was back to square one.
Fixing my revolution slider background video problem
The only thing left for me to do was to start messing around in developer tools by changing CSS on-the-fly. I worked my way up from the cover thumbnail container applying visibility: inherit !important; to each preceding parent container. My stubbornness and hard work paid off. I immediately saw my video playing. It had been playing this whole time. It appears it was hidden behind the cover thumbnail.
Applying the below css code sitewide resolved the issue on all of my video pages:
That’s all there is to it. Hours of diagnosing and troubleshooting and a simple line of code corrects the problem. Applying this code doesn’t appear to affect other browsers negatively. My videos looked and played just fine in MS Edge. It’s possible an update in Revolution Slider changed something. I doubt it though. It does appear to be a bug (or maybe a feature?) in Chrome. I came across other posts citing display issues with parallax backgrounds in Chrome 67. No pun intended, but perhaps Google is opting for more transparency when it comes to background assets and loading priority.
I’m honestly surprised that awareness of this bug is not more widespread yet. I did come across another StackOverflow post with the visibility fix here. I hope that my fix helps others who are experiencing the same problem. It may seem like a small gripe, but these background videos can be an integral part to a page’s design. In my situation, it is the main focal point, used as informational pieces and to increase user engagement.
UPDATE: 7/20/18 – I’ve noticed a lot of traffic coming to this page over the last few weeks. If you’re having issues with youtube background videos still, make sure Revolution Slider is up to date. In the changelog for version 5.4.8, it is noted that this problem has been fixed. It looks like the visibility property has been set to inherit by default now. If that still doesn’t fix your issue, leave a comment below. I’d love to hear about it!