Section background video not playing... or only playing sporadically

Support
#1

Hello, The section background video of my page previously played well (on the host where I built the site), but now on the new host, it’s not playing when I load the page. Once, it didn’t play, but upon reloading it did play. Now it’s not playing at all again.

Problem page: http://cookesbrakes.com/services-and-repair-philosophy/
(section in question is Section 1)

Page where it works: http://cookesbrakes.jove.design/services-and-repair-philosophy/

Now, I will admit that I have enabled the plugin ‘Hummingbird’ since moving the site, as well as Google Analytics… that said, it was still playing (at least sporadically) before. I know that the path is correct because I inspected the element. Any suggestions?

#2

Hey @jonacello,

I reloaded your pages several times and the background video play every time. See https://youtu.be/SwrRqc9noC8

Please clear your browser cache or check in incognito mode.

Thanks.

#3

Hi @christian_y,

Actually last night after I posted here I tried it again and it did work–THEN. However, this morning–as of 8:55am PDT it’s not working again–neither in Firefox (same browser where it worked last night), in a private window, nor in Safari where I hadn’t previously viewed the site. It’s very sporadic. I’d appreciate it if you could check again. Thanks!

#4

I think I fixed the issue by deactivating the plugin ‘Hummingbird’. However, I do want to use the plugin (or a similar one) to help speed up my site. Can anyone suggest any settings to tweak that would prevent this problem from occurring in the future? (i.e… any idea what the root of the problem could be? CSS/Javascript minification? Gzip compression? Caching?)

Thank You

#5

Hi Jonacello,

Sorry, we can not really tell what is the issue if we can’t replicate it. Two possibilities though, it could be the Javascript minification, please exclude the theme JS from being minified.

http://cookesbrakes.com/wp-content/plugins/cornerstone/assets/dist/js/site/cs-head.js
http://cookesbrakes.com/wp-content/plugins/cornerstone/assets/dist/js/site/cs-body.js
http://cookesbrakes.com/wp-content/themes/x/framework/dist/js/site/x.js

This files are already minified, so it should not affect the performance of the site, whether you include this on Hummingbird minification or not.

Regretfully I could not find an “how to exclude” documentation of Hummingbird, please contact the plugin support/author on how you can do this.

It can also be, how you encoded your video 15mb for a 30sec video is kind of too big. Please web optimize your video, you can find free tools/app here.

Hope it helps,
Cheers!

#6

Hi @friech,

Thank you for the suggestions. I used the application ‘Handbrake’ to greatly reduce the size of the video without much loss of quality. It seems to be working on the desktop now, but not mobile.

Are background videos automatically disabled for mobile? If so, can they be enabled?

I also found a new plugin–PageSpeed Ninja–that works really well–excellent results (shaved about 60% off of my page load time) and it doesn’t seem to be causing any problems. I really recommend this relatively new plugin (and OVER Hummingbird) for anyone looking to boost their page speed with ease.

#7

Hi,

The videos will only play in mobile if initiated by a user but since background video doesn’t have controls it is not possible.

Here are some reason why video does not autoplay in mobile.

  • In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.
  • Autoplay is disabled to prevent unsolicited cellular download.
  • iOS not only prevents autoplay but also preloading the video until the user initiates it.

https://www.aerserv.com/blog/why-does-video-autoplay-on-mobile-devices-not-work/#themeco

Thanks

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.