Mute video-bg not working

Question

I've tried many guides and read many answers regarding this problem, still not managed to solve this. How do I mute my youtube embedded video? P.s. I'm a noob at coding and new to SOF, forgive me if I did something horribly wrong.

<div class="video-bg embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" width="560" height="315" 
src="https://www.youtube.com/embed/ArGfDo1xQuM?rel=0&controls=0&showinfo=0&frameborder=0&autoplay=1&loop=1&playlist=eXadofBB7hM" frameborder="0" allowfullscreen></iframe>

</div>

As far as I'm aware there is no way to mute the `iframe` element. Can you download the video and include it as the source for a `video` element instead? — Jonathan Bartlett, Jun 04 '17 at 11:20
Possible duplicate of [How do I automatically play a Youtube video (IFrame API) muted?](https://stackoverflow.com/questions/8869372/how-do-i-automatically-play-a-youtube-video-iframe-api-muted) — mx0, Jun 04 '17 at 11:55
@JonathanBartlett i'm downloading right now, it's going to take a while, will sure try that way and hope to find a solution! I'll keep you updated — Tobia Corona, Jun 04 '17 at 12:00

mx0 · Accepted Answer · 2017-06-04T12:34:29.527

You have to use iframe_api. In iframe src attribute you have to add enablejsapi=1, also iframe has id attribute that connects it with YT.Player instance. Then use this javascript to control movie playback.

<script src='http://www.youtube.com/iframe_api'></script>
<script>
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('playerId', {
            events: {
                onReady:onPlayerReady
                }
            }
        )
    }
    function onPlayerReady(event) {
        player.mute();
        player.setVolume(0);
        player.playVideo();
    }
</script>


<div class="video-bg embed-responsive embed-responsive-16by9">

<iframe id='playerId' class="embed-responsive-item" width="560" height="315" 
src="https://www.youtube.com/embed/ArGfDo1xQuM?rel=0&controls=0&showinfo=0&frameborder=0&autoplay=1&loop=1&playlist=eXadofBB7hM&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

</div>

Thank you so much! You saved my day, I'm happy to understand how it works now! @mx0 — Tobia Corona, Jun 04 '17 at 12:58

Mute video-bg not working

1 Answers1