0

I would like to change this of the click with a button. I would like it to be lige a toggle so that the sound can be muted and unmuted: 

<div class="video-player" data-property="{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:'.module-video', startAt:0, **mute:false**, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}"></div>

to

<div class="video-player" data-property="{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:'.module-video', startAt:0, **mute:true**, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}"></div>

I tried like this: 

?>
                <!-- Youtube player start-->
                <div class="video-player" data-property="{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:'.module-video', startAt:0, mute:true, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}"></div>
                <!-- Youtube player end -->
                <?php


        echo '</section>';

    endif; /* END VIDEO */  

    ?>

    <script>
$(document).ready(function(){
    $("#mutebutton").click(function(){
        $(".video-player").replaceWith('<div class="video-player" data-property="{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:'.module-video', startAt:0, mute:false, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}"></div>');
    });
});
</script>


    <button id="mutebutton">Mute / unmute</button>
Madhawa Priyashantha
  • 9,633
  • 7
  • 33
  • 60
Søren Vigsø Morthorst
  • 9
  • 6
  • you have to use Javascript. Php runs on the server and delivers HTML. Javascript runs on the client and can handle it. – Dominik Apr 19 '16 at 11:49
  • But how do i do that? – Søren Vigsø Morthorst Apr 19 '16 at 11:51
  • You can refer http://api.jquery.com/replacewith/ if you want to do using jquery or https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild if you want to go with javascript only. Also look at this link - http://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript – Developer107 Apr 19 '16 at 12:00

1 Answers1

0

The easier way to do it would be by replacing only data-property tag. It would like this:

 $(document).ready(function(){
     var toggle = false;
     $("#mutebutton").click(function(){
         if(toggle) toggle = false; else toggle = true;
         $(".video-player").data('property', '{videoURL:'<?php echo $shop_isle_yt_link; ?>', containment:".module-video", startAt:0, mute:' + toggle ? 'true' : 'false' + ', autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:25}');
     });
 });
Damian Bartosik
  • 498
  • 6
  • 24