JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="#">
<a href="#" id="show_me"><i class="icon fa fa-fw fa-angle-down"></i><span>Show</span> Me</a>
    <div id="i_frame"></div>
</div>

CSS

#i_frame {
    display: none;
}

JavaScript

$(document).ready(function(){
    $("#show_me").click(function(e){

        e.preventDefault();

        if ($(this).is(".opened") ) {
            $(this).removeClass("opened").find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down").parent().find("span").text("Show");
            $("#i_frame").hide().html("");

        } else {
            $(this).addClass("opened").find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up").parent().find("span").text("Hide");
            $("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
        }

    });
});