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

Question

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 class="sct 1"> 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 class="sct 2"> 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 class="video-container"> <div class="video-description"> 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 class="content"> <img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20"> <section class="sct 4"> 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>

Answer 1

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 class="sct 1"> 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 class="sct 2"> 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 class="video-container"> <div class="video-description"> 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 class="content"> <img id="myImg" class="button" onclick="myFunction()" hidden src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20"> <section class="sct 4"> 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>

Answer 2

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 class="sct 1"> 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 class="sct 2"> 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 class="video-container"> <div class="video-description"> 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 class="content"> <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 class="sct 4"> 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>

Answer 3

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 class="video-wrapper">
    <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