How to play background video with sound?

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

Hi @ArnoldDelaCruz , could you please add me as a watcher too? I’d be very happy! Thanks alot!

Hello
@ArnoldDelaCruz can you please add me to watchers in your thread :pray:t2:

Perhaps I can assist in answering them.

When someone visits a website and a video plays automatically, it usually catches them by surprise. Now imagine how much worse if the sound also automatically came on, especially if you’re browsing on your phone in a quiet public place.

If someone clicks on a link and actually expects a video, then they may easily click to unmute the sound. If someone clicks on a link who doesn’t expect a video, it may be difficult to locate where the sound is coming from and mute because they did not expect it.

The reason most people install ad blockers is to remove unwanted sounds that automatically come on when a page loads. It’s bad enough that they are greeted with ads, now imagine ads with sounds.

By removing automatic sounds, there is much less incentive for people to install ad blockers. This way, ads can still reach their audience and websites can make money and stay in business.

In most countries, mobile phones have limited data plans, and people get charged extra money for exceeding their data usage. It is a waste of data (and money) to load unwanted audio. Mobile phone signal bandwidth is also a limited resource, especially in crowded locations where there is a high density of people using their phones at the same time, and connecting to the same cell towers (for example, in a sports arena for convention center).