Wordpress website not playing background video

11/23/2017

I built and host the website https://www.kunstwinder.com, I used Wordpress and the theme Enfold(latest v4.2) to build it, and I was hosting it in AWS (EC2).

Recently, I moved the website to a Kubernetes cluster running on Google Cloud. Everything is fine but for the video that plays in the background in the main page, for some reason that stopped working. For reference, I am using the docker image wordpress:4.9.0-php7.1-apache and the latest Kubernetes version (v1.8.3-gke.0). I have been debugging the issue for days, and I can't find a solution.

At first, I thought the issue must be related to the change in hosting, but after going through the nginx (used as reverse proxy) and kubernetes config I haven't found anything. The most puzzling part is that if you access the video directly on https://www.kunstwinder.com/wp-content/uploads/2017/11/CarbonFiberRed_NoAudio_converted.mp4 it will work. I've also tried downloading it with cURL and although the speeds are not stellar, they are definitely enough to load that video while it's playing. In my opinion this points to an issue in either the front-end or the browser.

I have tried in multiple browsers and devices, and the problem presents in all of them. Checking the website for HTML errors with tools online, throws a few warnings and errors, but nothing major. Other videos in https://www.kunstwinder.com/videos that are not in autoplay work without a problem.

I read that Chrome stopped auto playing videos with sound, but this one has no audio either. If you have suggestions or ideas as to why this is happening, please send them my way.

-- tokenizer_fsj
kubernetes
video
wordpress

1 Answer

11/27/2017

Looking at the page source there is only one video tag on the above page and it does not include the autoplay attribute:

</div><video class="avia_video"  controls id="player_12_811126710_1300552843" > <source src="https://www.kunstwinder.com/wp-content/uploads/2017/11/CarbonFiberRed_NoAudio_converted.mp4" type="video/mp4" /></video>

Note you generally need to specify 'autoplay' and 'muted' to get the maximum possibility of autoplay at this time (the rules change from time to time).

Its also worth being aware that browsers may provide the ability for the user to override any autoplay instructions, via the browser settings or configuration.

-- Mick
Source: StackOverflow