Streaming live at 10am (PST)

How to play background video with sound?

I’ve readed through the forum posts but did not found any solution.
I’m using a background video element to play - yes a background video :slight_smile:
At the moment I don’t wanna use an url to some videoplatforms, thus I can’t use the video component because it is for external videos only, right?

Since Webflow removes the audio-channel of the video, I exported the code and replaced the video-file with the file that contains the audio.

The exported Markup of the Video-Element looks like this:

  <video autoplay="" loop="" style="background-image:url(&quot;videos/videoname-poster-00001.jpg&quot;)"  muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
      <source src="videos/videoname-transcode.mp4" data-wf-ignore="true">          

I thought that removing muted="" would be the solution, but it is not.
When I remove it, then the video does not play anymore.
It confuses me, because in the w3schools example it works.

I also tried with some Javascript.
I added an ID to the Video-Element and added this Javascript before the closing Body-Tag:
function unMute() {

	var video=document.getElementById("myVideo")

		video.muted = false;
		console.log('is unmuted');
	} else {
		video.muted = true;
		console.log('is muted');


But this does, in my opinion, basically the same like manually remove the Mute-Attribute in the Video-Tag.

Does anybody know how to play a Background-Video with sound?

Kind regards

It seems to be a Chrome and Firefox restriction.
See here: Autoplay Policy Changes  |  Web  |  Google Developers

Does anybody know a workaround?

Ok I think I did understand now the issue :slight_smile:
Since latest Chrom Autoplay Policies the User has to interact with the Website to turn on/off audio.
I added a Button to turn on/off the music (example here).
But autoplay sound with no userinteraction first is not allowed anymore.

The reasons why Google is doing this are:

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.

Sorry, but my little brain does not understand those reasons.

  • Improve user experience?
    If you play a video and it does not play audio automatically then this is the opposite of user experience to me

  • Minimize incentives to install ad blockers?
    What has “no autoplay audio in video” with ad blockers to in common?
    You better do less ads, then we need less ad blockers.

  • Reduce data consumption on expensive and/or constrained networks.
    Where in this world we still have expensive network if everybody can use his smartphone to browse through the internet?
    Where in this world are constrained networks? And what will it help if they can decide to play a video with or without audio? The also can decide that after it plays.

Maybe some can explain me those reasons?
Sorry, if it has become offtopic :slight_smile:

Kind regards

1 Like