JSFiddle - React, Tailwind, and code Playground

HTML

<div id="videoGallery">
    <button id="opt1">Option 1</button>
    <button id="opt2">Option 2</button>
    <div class="yesDisplay">
        <p>Video 01</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>
    <div>
        <p>Video 02</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/MkLFlaWxgJA?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

#videoGallery div {
    display:none;
}
.yesDisplay {
    display:block !important;
}

JavaScript

var buttons = $('#videoGallery button');
var videos = $('#videoGallery div');

buttons.on('click', function () {
    var index = buttons.get().indexOf(this);
    videos.removeClass('yesDisplay');
    videos.eq(index).addClass('yesDisplay');
});