Search code examples
javascripthtmlvideoyoutube-javascript-apimute

Mute video-bg not working

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>
Solution

  • 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>