JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "iframe_contain">
<iframe width="0" height="0" hidden="hidden" id="iframe"
src="http://www.youtube.com/embed/y6120QOlsfU?autoplay=1&loop=1">
</iframe>
</div>
<a href="javascript:" id="mute">Mute</a><a href="javascript:" id="unmute">Unmute</a>

CSS

a {
    padding: 10px;
    margin: 15px;
    background-color: #444;
    color: #fff;
}

JavaScript

(function(){
    $("#mute").click(mute);
    $("#unmute").click(unmute);
    //backup iframe
    var iframe_bk;
    //play status
    var status = 1;
    function mute(){
        if(status!=1) return;
        var iframe = $("#iframe");
        iframe_bk = iframe.clone();
        iframe.remove();
        status = 0;
    }
    function unmute(){
        if(status!=0) return;
        if(iframe_bk){
            $("#iframe_contain").append(iframe_bk);
            iframe_bk = null;
            status = 1;
        }
    }
})();