How to play background video with sound?

because at 3am, 5% volume may as well be an earthquake.

:laughing:

Here’s a good article as to why autoplay isn’t recommended, I’m not sure how much your ranking is affected if you don’t align with WCAG 2.0, but custom code is the way forward if you do decide to implement it.

http://www.punkchip.com/autoplay-is-still-bad-for-all-users/

Great feedback, thanks! :grinning_face_with_smiling_eyes:

I am well aware of the reasons (worked in IT for over 30 years) - BUT it does not mean I have to agree with the reasons. It should not be a “all or nothing” option - if (and I do) I create websites for bands/musicians/artists then it is clear to presume that said site WILL contain music - if the visitor searches for a topic that is related to sound then they would expect to hear sound. As a developer of such websites then it should be easy for me to be able to add such features without being restricted in this way.
You may agree with this approach - I don’t

2 Likes

Hey @ArnoldDelaCruz , can you please add me as a watcher? I cant see the post and I need to play audio on a background video for a band website that I am designing!

Thanks!
Tiago Gil

Hey @ArnoldDelaCruz , could you please add me as a watcher? would love to know how it’s done.
Thank you very much!

Hi. Can you please add me as a watcher? I’m desperately trying to figure out how to play sound on my background video.

Thanks!

Trying to figure out how to play sound on my background video.pls Help

Can you please add me as watcher?! Thanks!

webflow should allow sound in background video. it will be improve their user experience. I had troubles related background video also like you.

Hi all this note is for any one who will now or in future looking for solution.

I will start with a bit of basic toughts what background video is. The background video should truly act like background and not require the website visitor to do anything with it. The video is simply there, setting the tone and/or mood of website.

While you’re thinking about the right video for autoplay on repeat, you’ll need to decide if it makes more sense for the sound to automatically be on, or off. Consider the video itself. You don’t want it to be distracting, so, in almost all cases, it’s best to keep the sound off. If sound can truly add something to the website page, then allow the website visitor to choose sound or no sound.

Allowing is an is important word as auto-sound on background video is a good way to lose visitors. In fact any browsers strictly disallow play sound automatically including auto-played video. This restriction was introduced in Chrome 66 and since then it is as DEFAULT setting followed by other browsers.

To play ANY sound on website REQUIRE USER INTERACTION that includes video sound. This mean that to play sound on autoplayed video you have to introduce button that user can click if is they would like to hear it.

That said you can find on internet some custom code how to hack it but Google AI is cleaver enough to find and understand what page is trying to do and it will most probably rank your page down. If this is your aim for yours or your clients websites you are welcome to do that.

These only some sources to read but feel free to find one you will understand easily

1 Like

Hey @ArnoldDelaCruz , could you please add me as a watcher too?
Thank you very much!

Hi Alain, I find this solution and its working perfectly: Background Video with Audio (using plyr.js) - Webflow.

When you see the first line of code on te embedded widget (

Hi @ArnoldDelaCruz could you please add me as a watcher too? Thanks!!

It’s a shame how Macromedia’s immersive web 1.0 and FAANG orthodoxy’s 2.0 is such a contrast for genuine experiences of the internet. There’s loads of blogs and affiliate clutter that get to play audio for commercial reasons so it’s possible. Webflow/HTML/JS/CSS has done a lot to get near what Flash could do but it’s so lacking in comparison for opportunities to just be creative about what an experience is.

A shame that an interactive experience utilising human sense of sound is to be deemed unnecessary and unachievable. It’s an extremely conservative and reductive view of humanity.

The muted attribute silences the video’s audio. Unless the user activates sound, you should generally avoid playing video sound on your page.

Hi @Sam_Sharpe please read my comment and links I have posted above to understand why muted sound as init state is web standard for many years.

I just wanted to comment on this topic in general:

Video is a rather complex subject due to the large bandwidth and amount of data involved.
That’s why webflow has set these hard limits (like compression and no sound) on their background videos, and otherwise urges you to use Vimeo or YouTube.

So since webflow has decided that video is not the problem they are going to focus on solving, you need to look into HTML5 video:
https://www.google.com/search?q=html5+video

HTML5 video can be manipulated in every way imaginable to make your video website ideas (with high resolution, high quality audio, transparent background, etc.) a reality.

But you need to find a way to host the video file and (in most cases) get an .mp4 link.

It turns out that there are very few companies and services that will give you access to these .mp4 links…

Fortunately, there is a service called ImageKit.io:
https://imagekit.io/features/video-optimization/

There is still very little documentation on this service. Just know that they make this possible. (You get this .mp4 link very easily from the “Media Library”).

(+ I have heard from customers that they have managed to get .mp4 links from Dropbox. But again. There is not so much information about it)

I really do not understand how this is related to “why sound is muted as an initial value”.

IMO their API documentation is rich so what are you missing in it?

I would love if you can add me as a watcher as well. I’ve been struggling with this issue