How to show/hide streaming video player using JavaScript controls

Other Questions Twitch
1

I’m building a custom website and want to add streaming video functionality. The goal is to have the page load without any video content visible, then use JavaScript buttons to toggle the streaming player and chat window on and off. I’m having trouble getting the toggle functionality to work properly. Any suggestions would be helpful!

<button onclick="toggleVideo()">Show/Hide Video Stream</button>
<button onclick="toggleMessages()">Show/Hide Messages</button>

<script>
var videoVisible = false;
function toggleVideo() {
    if(videoVisible == false) {
        videoVisible = true;
        document.getElementById("VideoStream").style.display = "block";
    } else {
        videoVisible = false;
        document.getElementById("VideoStream").style.display = "none";
    }
}

var messagesVisible = false;
function toggleMessages() {
    if(messagesVisible == false) {
        messagesVisible = true;
        document.getElementById("MessageBox").style.display = "block";
    } else {
        messagesVisible = false;
        document.getElementById("MessageBox").style.display = "none";
    }
}
</script>

<iframe id="VideoStream" src="streaming-video-url" width="1200" height="675"></iframe>
<iframe id="MessageBox" src="chat-messages-url" width="350" height="675"></iframe>
2

Your JavaScript works but you can simplify it a lot. Skip the boolean variables and if/else statements - just check the display style directly: element.style.display = (element.style.display === 'none') ? 'block' : 'none'; Much cleaner. I’ve done this in several projects and it prevents your JS from getting out of sync with the DOM. If you want to expand this later, use CSS classes with transitions instead of direct style changes. Way easier to add fade effects or other animations.

3

Your code structure looks good, but you’re probably missing the initial CSS styling for those iframes. You need to set both VideoStream and MessageBox to display: none; in your CSS since your JavaScript variables start as false. Without this, the iframes show up when the page loads even though your variables say they should be hidden. I hit this exact same issue last year building a similar streaming interface - the toggle worked fine but the initial state was wrong. Just add this CSS rule: #VideoStream, #MessageBox { display: none; } and your toggle should work properly from page load.