How to play background video with sound?

Community resources Show & Tell
1

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

2

It seems to be a Chrome and Firefox restriction.
See here: Autoplay policy in Chrome - Chrome for 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
3

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

4

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

1 Like
5

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: https://preview.webflow.com/preview/ltv15fullmenu?utm_medium=preview_link&utm_source=designer&utm_content=ltv15fullmenu&preview=22f728dd8dba11714cb10c8d5a2178ba&pageId=61503d805bd34cc6c7966641&workflow=preview

URL: https://ltv15fullmenu.webflow.io/installation-guide-page

Hope you can help?

Many thanks!!

Regards,
Julian.

6

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

7

Hi Alain,

My apologies, it seems to have vanished. I have restored to a previous version: https://ltv15fullmenu.webflow.io/installation-guide-page

Kind regards,
Julian.

8

@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:

9

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.
10

@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?

11

Hi Alain,

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

Best regards,
Julian.

12

@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

13

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!

1 Like
14

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

15

Hi @Alain @Julian_Hibbert @PeteM :wave:

I found this thread searching for the same solution but have stumbled upon similar posts without any real resolution. I’ve refactored a code snippet, tested it, and failed. I’ve started a fresh thread with @PixelGeek hoping to reinvigorate the topic and find a workable solution for all of us.

You can follow my thread, “Unmuting audio for background video”

Here’s hoping :crossed_fingers:

Best,
Arn

16

Thanks Arn!

If anyone can figure it out, it may be @PixelGeek!

May the force be with you.

:person_climbing:

17

Thanks for the link - unfortunately I get an error when trying to access it?

18

Hey @PeteM – sorry, I’m not sure why that is but I’ll see if I can add you as a watcher :slight_smile:

20

Thanks I can see it now - I very rarely look at the forums to be honest - as this is just a hobby which I don’t have a lot of time for at the moment…Hopefully something will change with it soon…otherwise it’s going to have to be a cheat of “click on button” to enter site which automatically saves a cookie which then automatically allows sound! - it’s a hack but considering 95% of the websites I am involved in are for bands / musicians, it’s ridiculous that I have to jump through hoops to be able to play sound.

1 Like
21

it’s ridiculous that I have to jump through hoops to be able to play sound.

It’s difficult to see the reasons against auto-playing if you’re not that bothered by it yourself, but try to consider it from the perspective of your visitors, who you have never met and whose circumstances you don’t know.

Giving people an easy way to play the sound is a far superior experience than ramming it into their ears without a choice, it’s also polite, and not rude. It’s super easy to add a giant play button, and your traffic will stay much longer than if you auto-play. You also get an extra data point, because you’re now able to see which users wanted to play your music, vs the one who didn’t.

There’s a really good reason the largest company on earth removed the ability to auto-play sound, let it serve you as a hint. (It wasn’t just because they felt like it)

If you track analytics, you will always see an increase in time spent on the site when you turn autoplay off. I’ve developed consulted and and worked on sites for 20 years for professional bands and I’ve seen, studied and analyzed so much data over the years on this.

Users with sensory issues will appreciate it. People on pay as you go mobile plans will appreciate it for not draining extra data. Parents waking up at 3am feeding their baby and didn’t realise their phone was on 5% volume will appreciate it… because at 3am, 5% volume may as well be an earthquake.

For the love of 95% of the population in the world with access to the internet… and there are millions not on data plans like you and I, don’t auto-play music on your site. :pray:

1 Like