To understand why this is happening we need to take into account recent browser vendor policies for videos. Many modern browsers are strictly prohibiting, in one form or another, audio playing on it's own from a web page as they consider that to be terrible user experience, and we agree. Because of this, any video that you set to "Auto-play" will begin muted with a button in the top corner that says "Click for Sound".
But, you may say, my video is not set to auto-play, and my visitors click on play and the player is still muted. So what gives?
And the answer to that lies in specific policies which browser vendors dictate must be met before a video is played. There are many policies but they can be broken down in 3 main categories.
- Previous interaction with the page before audio is triggered
- Visibility of the video element in the viewport
- Media-engagement index, which basically informs the browser how often you play audio on a specific domain. Trust factor of sorts if you will.
YouTube hosted videos
For videos which are hosted on YouTube and are loading through the YouTube player the problem is two fold. When such a video is loaded in vooPlayer, we load an additional YouTube player embedded inside of vooPlayer, just with an extra layer of our controls and interactive elements on top.
So basically on your web page you may have an embedded vooPlayer frame which in itself has an embedded YouTube frame. This is the first thing that makes it difficult to load audio when video is played. Because vooPlayer needs to propagate events happening on your site to the YouTube player, and it can be difficult to do that sometimes, especially due to Cross-origin-resource-sharing policies.
Lazy loaded videos
The vooPlayer default embed code embeds a "lazy load" player on your site. This means that there is no player until the visitor clicks on play. Until such time all you have is a background poster and a mocked up play button. This is done for better page performance and faster page load.
This presents an additional challenge as there is no video element which is visible and one is subsequently "injected" into your page and is attempting to play audio, which to some browsers may seam like it's trying to auto-play.
Troubleshooting this issue
Our recommendation, as always, remains to upload your videos to vooPlayer which makes sharing needed events a lot easier across different environments.
If you are leveraging and need to continue using YouTube hosted videos, our recommendation is to generate a new, non BETA Optimized code. However this will greatly impact how videos and their audio can be played, considering the player and with it the YouTube player will be loaded before the visitor clicks on play.
New and improved player, which is currently in it's BETA testing program, takes these lessons learned into account and lays the groundwork for much direct handling and combination of performance and playback experience. Once released to production all videos will benefit from this update.