How to automatically mute/unmute html video on scroll

Question

I'm editing a website for a client, and he never mentioned that there will be some javascript edits included, but here we are. Since I'm not familiar with js at all, I could really really use your help. So, the thing is, there is a video (so called playable ad for mobile) in the header. When you click on it, you get to play some game with the sound ON. What my client wants is when you scroll down and the video is not visible anymore to MUTE the sound, and UNMUTE it when you scroll up. I haven't built this website, I'm just editing it.

I've spent days on this, reading different posts and solutions here and on Google, but whatever I tried didn't work. Since I'm not familiar with Javascript, I suppose that I'm doing something wrong. I suppose that I can't just copy someone else's code and expect it to work, but I probably have to change variable name or something else. But I don't know how to change it and make it work.

<a class="img" href="">
<iframe src="https://appsposure.com/wp-content/uploads/2019/06/bask.html" scrolling="no" frameborder="0"></iframe>  
<img class="phone-img lazyloaded" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt="" data-lazy-src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" data-was-processed="true"><noscript><img class="phone-img" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt=""></noscript>                                
</a>

Here is the solution that I've tried multiple times, but it doesn't work since I probably don't know how to adjust it for my website.

Also, here is the link to the website I'm working on (I'm talking about the video in the header, the one with basketball player on it).

If there is anyone willing to help me, I would really appreciate it, since I'm struggling for days, and I'm just too stupid for this.

Answer 1

added basketball-player id on the iframe

<a class="img">
<iframe id='basketball-player' src="https://appsposure.com/wp-content/uploads/2019/06/bask.html" scrolling="no" frameborder="0"></iframe>  
<img class="phone-img lazyloaded" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt="" data-lazy-src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" data-was-processed="true"><noscript><img class="phone-img" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt=""></noscript>                                
</a>

using embedded scripts in html.

<script>
window.addEventListener("scroll", muteOnScroll);

// function for the eventlistener
function muteOnScroll() {
    // if the iframe is out of view
    if (document.documentElement.scrollTop > 610) {
        // targeting the iframe with the id of basketball-player to turn off sound
        document.getElementById("basketball-player").volume = 0.0;
    // else the iframe must be in the view so the sound should be on
    } else {
        document.getElementById("basketball-player").volume = 1.0;
    }
}
</script>

used 610 because that it was I found the top to be when I scrolled the iframe out of view.

EDIT

used part of what you provided and some of this documentation

$(window).scroll(function() { 
    var iframe = document.querySelector('iframe');
    if ($(this).scrollTop() > 900){ 
        iframe.mute();
    } else { 
        iframe.unmute(); 
    } 
});

Answer 2

You can check if an element is visible with this function

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

from the question Check if element is visible on screen.

Then you attach a function to the onscroll event handler of the window with

window.onscroll = function() {
  // CODE
};

You can handle the video being scrolled with some code like this:

video.muted = !checkVisible(video);

with video being the video's element.

This snippet shows this in action:

var video = document.getElementById('video');
var wrapper = document.getElementById('wrapper');
var videoPreviouslyVisible = false;

window.onscroll = function() {
  wrapper.style.backgroundColor = checkVisible(video) ? '#4f4' : '#f44';
  video.muted = !checkVisible(video);
};

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

body,
html {
  height: 100%;
}

#wrapper {
  height: 400%;
  background: none repeat scroll 0 0 #f44;
}

#video {
  position: absolute;
  top: 150%;
  left: 33%;
  width: 200px;
  height: 100px;
  background: none repeat scroll 0 0 #fff;
  border: 5px solid black;
}

<div id="wrapper">
  <div id="video"></div>
</div>

EDIT:

I've looked into this further and it seems like you're trying to mute an IFrame instead of a video. This is not possible as it is a seperate html website embedded into yours. You may be able to access the embedded JavaScript code though it would most probably require the assistance of the original developer of this browser game.

My answer still applies to any user looking to mute any DOM element with the muted property upon disappearing from view.

I would advise you to contact the original developer and ask him to implement a convenient way to mute the JavaScript game engine the "playable ad" is implemented in.