Streaming live at 10am (PST)

How to play background video with sound?

Hi
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">          
    </video>

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")

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

	}
	unMute();

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
Alain

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

Does anybody know a workaround?

Edit:
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
Alain

1 Like

Hi Alain, I’m looking for the same answers. Hopefully someone can assist.

Browser vendors usually document why they make changes they introduce to versions. Visit the official sites to learn more about that.

1 Like

Hi Jeff,

Thanks for your response. Do you know how to make a video not look like a YouTube advert within Webflow? In terms of the Webflow full control abilities, there must be a way to do this?

Please could you have a quick look at what ive tried as a work around below. My workaround looks good but I just cannot control the video to start playing and the user needs to click the play button twice as a result.

Preview: Webflow - ltv15fullmenu

URL: Installation Guide Page

Hope you can help?

Many thanks!!

Regards,
Julian.

@Julian_Hibbert
There is no video on the Installation Guide Page.

Hi Alain,

My apologies, it seems to have vanished. I have restored to a previous version: Installation Guide Page

Kind regards,
Julian.

@Julian_Hibbert
Is the video-file to big to place it directly on the page?

Anyways:
Your problem is not quite clear to me.
You first cover your video with a youtube-free playbutton.
But after clicking on play youtube is visible again.
Either you remove Youtube complete, but just covering it with something is not consequent enough to me :slight_smile:

Here are some settings Youtube gives you:

I tried the “modestbranding” parameter but it did not work.
Here is a videotutorial how you could implement a video with embed code to have more control over the video:

Maybe this helps.

I think Vimeo has more possbilities to play brandfree videos.

Sorry, I think I’m not a big help to you :slight_smile:

Hi Alain,

You certainly are a help and I hope I can reciprocate someday?

  1. What do you mean by is it too big to place on the page directly? It’s 26mb?
  2. Agreed, my solution doesn’t work.

@Julian_Hibbert
Sorry, I was wrong. Uploading video directly on Webflow only works for muted background video’s.
But maybe you can tweak it and unmuting the video with custom code?

Hi Alain,

Thanks for your help, i will do so :slight_smile:

Best regards,
Julian.

@Julian_Hibbert - I have the same problem - I want to either play a video with sound (it’ just a 7 second video intro) 0r do the same with the video converted to Lottie and then play the audio automatically. Neither of these options seem to work. Did you manage to override the sound of the video?

Thanks
Pete

Hi Pete, I found out that this isn’t possible without using custom code.

I am trying a few things and should hopefully have it cracked in a few weeks. When I do I will let you and the forum know :slight_smile:

May the Force Be With You!

Thanks Julian - custom code is not a problem - I don’t have time at the moment to do it so it’s on the backburner - but I really cannot understand why it’s such a big problem - I am now even looking at alternatives to webflow - which supports lottie with sound - this to me is a major flaw.

Cheers
Pete