JSFiddle - React, Tailwind, and code Playground

HTML

<div class="videotoggle">
    <a class="entry-title" rel="1h9A-6V7dgQ">View a few minutes of the 101 session!</a>
</div>
<div class="videotoggle">
    <a class="entry-title" rel="Fm2aGWCeulQ">View a few minutes of the 102 session!</a>
</div>
<div class="videotoggle">
    <a class="entry-title" rel="YsEWe6jNJn8">View a few minutes of the 103 session!</a>
</div>
<div class="videotoggle">
    <a class="entry-title" rel="0l6Rl9FNFF4">View a few minutes of the 104 session!</a>
</div>


<div id="dummyvid">
    <div class="videoblock"><iframe src="" width="560" height="315" frameborder="0" allowfullscreen></iframe></div>
</div>

CSS

.videotoggle {
    margin: 0px 10px;
}
.videoblock {
    height: 0px;
    width: 560px;
    overflow: hidden;
    background-color: #000;
}
#dummyvid {
    display: none;
}

JavaScript

$(document).ready(function() {
    $('.entry-title').click(function() {
        var t = $(this);
        var daddy = t.parent(), id = t.attr('rel');
        var item;
        
        if($('#vid_' + id).length === 0) {
            
            $('.videotoggle .videoblock').animate({height: 0},{
                duration: 400,
                queue:false,
                complete: function() {
                    $(this).remove();
                }
            });
            
            item = $($('#dummyvid').html());  
            item.attr('id', 'vid_' + id);
            item.appendTo(daddy);
            
            item.animate({height: 315}, {
                duration: 400,
                queue: false,
                complete: function() {
                    $(this).find('iframe').attr('src','http://www.youtube.com/embed/' + id);
                }
            });
        }
    });
});