JSFiddle - React, Tailwind, and code Playground

by Fahim Hossain

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<body>
    <iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/mPH-HOKTkAY?enablejsapi=1" id="fitvid768236"></iframe>
    <p>Click the button to change the background color of the document contained in the iframe.</p>
    <p id="demo"></p>
    <button onclick="myFunction()">Try it</button>
    <script>
        var toogle = 0;

        function myFunction() {
            if (toogle === 0) {
                console.log("Hello");
                toogleVideo();
                toogle = 1;
            } else {
                if (toogle === 1) {
                    console.log("Bye");
                    toogleVideo('hide');
                    toogle = 0;
                }
            }

        }

        function toogleVideo(state) {
            // if state == 'hide', hide. Else: show video
            console.log("Inside Toogle Video");
            var div = document.getElementsByTagName("iframe")[0].contentWindow;
            console.log("Inside Toogle Video1");
            func = state == 'hide' ? 'pauseVideo' : 'playVideo';
            console.log("Inside Toogle Video3");
            console.log(state);
            div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
        };
    </script>
</body>