How to add a button that toggles sound of a video when pressed?

Question

I want to have a button that mutes the video when clicked and toggle sound if the button is pressed again. So far I managed to mute/unmute the video when the actual video is clicked.

Javascript beginner here.

HTML

    <div>
        <div class="play-video">
            <img src="../images/icon.svg" class="volume-icon"/>
            <p class="button"> Play with sound </p> 
        </div>

        <div id="player">
        <video autoplay loop=""> <source src="../images/video-test.mp4" type="video/mp4"> </video>
        </div>

    </div>

Javascript

$(document).ready(function(){

    $("video").prop('muted', true);

    $("video").click( function (){
    $(this).prop('muted', !$(this).prop('muted'));
});
});

Thank you!

Answer 1

You just need to add this line after the first implementation (clicking video):

$(".play-video").click( function (){
    $("video").prop('muted', !$("video").prop('muted'));
});

So in the end your js code will be like this:

$(document).ready(function(){

    $("video").prop('muted', true);

    $("video").click( function (){
        $(this).prop('muted', !$(this).prop('muted'));
    });

    $(".play-video").click( function (){
        $("video").prop('muted', !$("video").prop('muted'));
    });
});

P.S.: I highly recommend you to give some classes to your video objects to distinguish between them. Otherwise, this implementation would "unmute" all video objects in your page if you have more than one.