Slowly Decrease YouTube Video Volume on Page Load

Question

I'm using this template to produce a fullscreen background video for my project. I need the sound to slowly decrease from 100% to 0% over 10 seconds.

How would I achieve this?

bootsnipp example

HTML

    <!-- Warming Up -->
<link href='http://fonts.googleapis.com/css?family=Buenard:700' rel='stylesheet' type='text/css'>
<script src="http://pupunzi.com/mb.components/mb.YTPlayer/demo/inc/jquery.mb.YTPlayer.js"></script>

<!--Video Section-->
<section class="content-section video-section">
  <div class="pattern-overlay">
  <a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=fdJc1_IBKJA',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
        <h1>Full Width Video</h1>  
        <h3>Enjoy Adding Full Screen Videos to your Page Sections</h3>
       </div>
      </div>
    </div>
  </div>
</section>
<!--Video Section Ends Here-->

score 0 · Answer 1 · answered Nov 04 '16 at 05:33

You may try this code:

$(document).ready(function () {

    $(".player").mb_YTPlayer(); //init the player

    var startingVolume = 100;
    var decreasingFactor = 10;

    var currentVloume = startingVolume;

    $(".player").YTPSetVolume(currentVloume); //setting the volume 100% initially

    var timeFrame = 10000; //10 sec
    var step = 1000; //1 sec
    var myInterval = null;

    //reduce the volume step by step per second
    myInterval = setInterval(function(){
        currentVloume = currentVloume - decreasingFactor;
        decreaseVolume(currentVloume);
    },step);

    //after 10 sec set the volume to 0 if its not yet set
    setTimeout(function(){
        clearInterval(myInterval);
        $(".player").YTPSetVolume(0);
    },timeFrame);

    function decreaseVolume(newVolume){
        if(newVolume < 0){
            clearInterval(myInterval);
            $(".player").YTPSetVolume(0);
        }
        else
            $(".player").YTPSetVolume(newVolume);
    }
});

Note : I couldn't able to test above code but I believe it will work for you.

This unfortunately didn't do the trick for me. I didn't notice any difference in the sound at all. It still plays back at 100% sound when it starts :/ — Joel D'Arnot, Nov 04 '16 at 06:39
sorry but i can't test my code as YT is blocked at my location...;)! — vijayP, Nov 04 '16 at 06:43
Shoot, that's ok. I really appreciate your help with trying to solve my problem :) — Joel D'Arnot, Nov 04 '16 at 06:50
So I've discovered that the data-property attribute "vol" will control the volume of the video. I'm able to set the vol:1 - 100 to have the initial volume change, I just can't figure out how to alter that property to decrease the volume. — Joel D'Arnot, Nov 04 '16 at 16:45

jegtugado · Answer 2 · 2016-11-04T05:40:42.357

The snippet on your link doesn't work for me. Anyway, try this out and see if it helps.

$(document).ready(function () {

    $(".player").mb_YTPlayer();
    // set the volume to 100
    document.getElementById("player").YTPSetVolume(100);
    var timerId = 0;
    var sec = 0;
    // run an interval every second
    timerId = setInterval(function(){
        if(sec <= 10) {
            // get the player's current volume
            var vol = document.getElementById("player").mb_YTPlayer.getVolume();
            // set the player's volume reducing it by 10
            document.getElementById("player").YTPSetVolume(vol - 10);
            if(sec == 10) {
                // End the interval
                clearInterval(timerId);
            }
            sec++;
        }
    }, 1000);
});

This unfortunately didn't do the trick for me. I didn't notice any difference in the sound at all. It still plays back at 100% sound when it starts :/ — Joel D'Arnot, Nov 04 '16 at 06:39

Slowly Decrease YouTube Video Volume on Page Load

2 Answers2