How to let mute/unmute button appears only in a proper section of the page once I refresh/enter the-CodePudding

I am a neewbie in Javascript: I made a mute/unmute button in a fixed position which mute a video in autoplay (no controls) while scrolling the page. Considered that when you enter the site or refresh the page my video starts only when you scroll till that specific section, is there a way to let the mute/unmute button appear only in 'video section' but then, once is appeared, to let it remain also in the previous sections? (from the top till the bottom of the page). I can not find a solution rather than let the button appear only from that section, but I want it to remain also in the previous sections.

Here how it looks now:

var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");

//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"

//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"

function myFunction() {
  // toggle the muted property of the video element
  video.muted = !video.muted;

  // if the video is muted, set the img.src to unmuteImg
  // otherwise, set it to the muteImg
  if (video.muted) {
    img.src = unmuteImg;
  } else {
    img.src = muteImg;
  }
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 80px;
}

.video-description , .sct{
  text-align: center;
  max-width: 66%;
  margin: 0 auto 24px;
  font: inherit;
  letter-spacing: 4px;
}

#myVideo {
  border-radius: 5px;
  max-width: 46%;
  object-fit: cover;
  margin-bottom: 20px;
}

#myImg {
  top: 10%;
  right: 3%;
  position: fixed;
  z-index: 50;
  cursor: pointer;
  padding: 10px 20px;
  background: #D3D3D3;
  color: #000;
  border-radius: 5px;
  display: inline-block;
}

<section >
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

<section >
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>


<section >

  <div >
 VIDEO SECTION <br><hr>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" autoplay loop>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>

  <div >

    <img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
  
 
<section  >
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

CodePudding user response：

Use an IntersectionObserver

var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");
const videoContainer = document.querySelector('.video-description')

//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"

//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"

const observer = new IntersectionObserver(entries => {
  for (const { isIntersecting } of entries) {
    if (isIntersecting) {
      img.hidden = false
      observer.disconnect()
    }
  }
}, { threshold: 0.1 });

observer.observe(videoContainer)

function myFunction() {
  // toggle the muted property of the video element
  video.muted = !video.muted;

  // if the video is muted, set the img.src to unmuteImg
  // otherwise, set it to the muteImg
  if (video.muted) {
    img.src = unmuteImg;
  } else {
    img.src = muteImg;
  }
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 80px;
}

.video-description , .sct{
  text-align: center;
  max-width: 66%;
  margin: 0 auto 24px;
  font: inherit;
  letter-spacing: 4px;
}

#myVideo {
  border-radius: 5px;
  max-width: 46%;
  object-fit: cover;
  margin-bottom: 20px;
}

.button {
  top: 10%;
  right: 3%;
  position: fixed;
  z-index: 50;
  cursor: pointer;
  padding: 10px 20px;
  background: #D3D3D3;
  color: #000;
  border-radius: 5px;
  display: inline-block;
}

[hidden] {
  display: none;
}

<section >
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

<section >
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>


<section >

  <div >
 VIDEO SECTION <br><hr>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" autoplay loop>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>

  <div >

    <img id="myImg"  onclick="myFunction()" hidden src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
  
 
<section  >
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

CodePudding user response：

If I understand correctly this is what you're looking for:

var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");

//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"

//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"

function myFunction() {
  // toggle the muted property of the video element
  video.muted = !video.muted;

  // if the video is muted, set the img.src to unmuteImg
  // otherwise, set it to the muteImg
  if (video.muted) {
    img.src = unmuteImg;
  } else {
    img.src = muteImg;
  }
}


const observer = new IntersectionObserver(
    (entries) => {
        if (!entries[0].isIntersecting) {
            img.style.display = "none";
        } else {
            img.style.display = "block";
            observer.unobserve(video);
        }
},
{ threshold: [0] });

observer.observe(video);

section:first-of-type {
  margin-top: 400px;
}
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 80px;
}

.video-description , .sct{
  text-align: center;
  max-width: 66%;
  margin: 0 auto 24px;
  font: inherit;
  letter-spacing: 4px;
}

#myVideo {
  border-radius: 5px;
  max-width: 46%;
  object-fit: cover;
  margin-bottom: 20px;
}

#myImg {
  top: 10%;
  right: 3%;
  position: fixed;
  z-index: 50;
  cursor: pointer;
  padding: 10px 20px;
  background: #D3D3D3;
  color: #000;
  border-radius: 5px;
  display: inline-block;
}

<section >
    SECTION 1 <br><hr>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    
    <section >
    SECTION 2<br><hr>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    
    
    <section >
    
      <div >
     VIDEO SECTION <br><hr>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    
      <video id="myVideo" autoplay loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
      </video>
    
      <div >
    
        <img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
      </div>
     
    <section  >
    SECTION 4<br><hr>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>

CodePudding user response：

Looks like you are missing some closing tags for one. You might review that and make sure all the divs and sections are closed.

Also, I got the code duplicated on my screen and it seems to functionally work. If I understand the issue, you literally want to move where the img is.

This will be a CSS change. You want to position the img relative to the wrapper, not the whole page, so you have to change tell it.

Something similar like this:

<div >
    <video id="myVideo" autoplay loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
    </video>
    <img id="myImg" onclick="toggleMute()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
</div>

Set the CSS as something like this. The "position: relative;" is the key, any child in this div will now be relative to this element

.video-wrapper {
    text-align: center;
    position: relative;
}

// change from fixed to absolute. and then it will be relative to the wrapper
#myImg {
    position: absolute;
}

This will get the img close to where you want it - the challenge will be getting the wrapper to hug the video element or the video element to expand to fit the wrapper