javascript - Toggle 'data-property' with a button & jquery

Question

I have a full screen youtube video as a background of a website that I'm working on and I'm trying to add a mute/unmute toggle with a button. This is how I'm pulling in the video :

<a id="bgndVideo" class="player" data-property="{videoURL:'https://youtu.be/KW2JUfgQct0',containment:'.video-section', quality:'high', autoPlay:true, mute:true, opacity:1}">bg</a>

I know the logic of how I'd like to run the toggle, when the buttons clicked I would like the data property to change, so if its data-property is mute:true onClick I would like it to change to mute:false and then back when clicked again.

this is what I've tried -

$(document).ready(function(){

 $(".muteButton").click( function (){
    $(this).data('mute', !$(this).data('mute'));
});

});

with an anchor tag -

<a class="muteButton" href="#">Mute</a>

I've looked up how to do this but had no luck, I've never written jquery so I'm lost, is this an easy thing to do??

Thanks

Answer 1

The data property of bgndVideo is not valid json syntax. so, its treating as string.

<a id='bgndVideo' class='player' data-property='{"videoURL":"https://youtu.be/KW2JUfgQct0" , "containment":".video-section", "quality":"high", "autoPlay":true, "mute":true, "opacity":1}'>bg</a> 
<a class="muteButton btn btn-default" href="#">Click me to Mute</a>
<div id="muteValueDiv"></div><br>
<div id="bgndVideoDataPropDiv"></div>
$(document).ready(function () {
      $(".muteButton").click(function () {

                $(bgndVideo).data('property').mute = !$(bgndVideo).data('property').mute;

                $('#muteValueDiv').html('After negation Mute Value is - ' + $(bgndVideo).data('property').mute);

                $('#bgndVideoDataPropDiv').html('After updating data property, data property is ' + JSON.stringify( $(bgndVideo).data('property')));
     });
});

Please refer jsfiddle: jsfiddle.net/u89oexea