I want to use following advertisement codes but I have problem to mute video after closing the video. When I close (additionally it closes after 20 seconds automatically) the advertisement, it plays the video in background and still there is sound. How can I mute video after I click SKIP AD button and when it closes automatically? I don't have knowledge about jQuery or JavaScript. Can you please modify my code and post the solution?

<script>
  window.setTimeout("document.getElementById('closead').style.display='none';", 6000);
</script>
<div class="advertisement" id="closead">
  <a target="_blank" rel="nofollow" href="">
    <video id="dbx" style="object-fit: fill;" autoplay="" width="100%" height="100%">
      <source src=".mp4" type="video/mp4">
    </video>
  </a>
  <button onfocus="this.blur();" class="closecss" style="position:absolute;bottom: 2px;right: 0px;z-index: 999;background: #32b02b;color: #fff;padding: 13px;border-radius: 4px;font-weight: bold;cursor: pointer;border: 1px solid #2b9825;box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 0 0 #299023, 0 2px 3px 0 rgba(0, 0, 0, 0.25);" onclick="document.getElementById('closead').style.display='none';">SKIP AD</button>
</div>

<style>
  .advertisement {
    position: absolute;
    z-index: 99;
    height: 100%;
  }
</style>

I want to use following advertisement codes but I have problem to mute video after closing the video. When I close (additionally it closes after 20 seconds automatically) the advertisement, it plays the video in background and still there is sound. How can I mute video after I click SKIP AD button and when it closes automatically? I don't have knowledge about jQuery or JavaScript. Can you please modify my code and post the solution?

<script>
  window.setTimeout("document.getElementById('closead').style.display='none';", 6000);
</script>
<div class="advertisement" id="closead">
  <a target="_blank" rel="nofollow" href="http://www.sitename.">
    <video id="dbx" style="object-fit: fill;" autoplay="" width="100%" height="100%">
      <source src="https://www.w3schools./tags/mov_bbb.mp4" type="video/mp4">
    </video>
  </a>
  <button onfocus="this.blur();" class="closecss" style="position:absolute;bottom: 2px;right: 0px;z-index: 999;background: #32b02b;color: #fff;padding: 13px;border-radius: 4px;font-weight: bold;cursor: pointer;border: 1px solid #2b9825;box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 0 0 #299023, 0 2px 3px 0 rgba(0, 0, 0, 0.25);" onclick="document.getElementById('closead').style.display='none';">SKIP AD</button>
</div>

<style>
  .advertisement {
    position: absolute;
    z-index: 99;
    height: 100%;
  }
</style>

• javascript
• jquery
• html

Share Follow edited May 25, 2018 at 8:18 Shiladitya 12.2k1717 gold badges2828 silver badges4242 bronze badges asked May 25, 2018 at 7:20 YearmazYearmaz 12511 gold badge44 silver badges1212 bronze badges 2

• Would it not make far more sense to pletely remove the video element from the DOM when the skip button is clicked? That way you avoid the muting issue pletely. – Rory McCrossan Commented May 25, 2018 at 7:24
• How can I do that? Sorry but I have not enough knowledge about these things. – Yearmaz Commented May 25, 2018 at 7:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

If you can modify the upper script, this is a good way.

<script>
	function removeVIdeo(videoId){
  	var video = document.querySelector(videoId);
    video.muted = true;
  }
  
  window.setTimeout(function(){
  	document.getElementById('closead').style.display='none';
    removeVIdeo('#dbx');
  },6000);
</script>
<div class="advertisement" id="closead">
  <a target="_blank" rel="nofollow" href="http://www.sitename.">
    <video id="dbx" style="object-fit: fill;" autoplay="" width="100%" height="100%">
      <source src="https://www.w3schools./tags/mov_bbb.mp4" type="video/mp4">
    </video>
  </a>
  <button onfocus="this.blur();" class="closecss" style="position:absolute;bottom: 2px;right: 0px;z-index: 999;background: #32b02b;color: #fff;padding: 13px;border-radius: 4px;font-weight: bold;cursor: pointer;border: 1px solid #2b9825;box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 0 0 #299023, 0 2px 3px 0 rgba(0, 0, 0, 0.25);" onclick="removeVIdeo('#dbx');">SKIP AD</button>
</div>

<style>
  .advertisement {
    position: absolute;
    z-index: 99;
    height: 100%;
  }
</style>

You can mute the video with mute attribute

jQuery("#dbx").prop('muted', true);

try this Yearmaz

As Enavar's answer says just put

$("#dbx").prop('muted', true);

line in $(document).ready(function(){});

.advertisement {
    position: absolute;
    z-index: 99;
    height: 100%;
  }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  window.setTimeout("document.getElementById('closead').style.display='none';", 6000);
</script>
<div class="advertisement" id="closead">
  <a target="_blank" rel="nofollow" href="http://www.sitename.">
    <video id="dbx" style="object-fit: fill;" autoplay="" width="100%" height="100%">
      <source src="w3schools./tags/mov_bbb.mp4" type="video/mp4">
    </video>
  </a>
  <button onfocus="this.blur();" class="closecss" style="position:absolute;bottom: 2px;right: 0px;z-index: 999;background: #32b02b;color: #fff;padding: 13px;border-radius: 4px;font-weight: bold;cursor: pointer;border: 1px solid #2b9825;box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 0 0 #299023, 0 2px 3px 0 rgba(0, 0, 0, 0.25);" onclick="document.getElementById('closead').style.display='none';MuteVideo()">SKIP AD</button>
</div>

<script>
  function MuteVideo(){
    $("#dbx").prop('muted', true);
  }
</script>

It will toggle between mute & unmute

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("video").click(function () {
    $(this).prop("muted", !$(this).prop("muted"));
});