JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion2">
        <h3><img src="http://img.youtube.com/vi/5PsnxDQvQpw/2.jpg">Everyday normal guy</h3>
    <p><iframe id='test' width="420" height="315" src="http://www.youtube.com/embed/5PsnxDQvQpw" frameborder="0" allowfullscreen></iframe></p>
        <h3><img src="http://img.youtube.com/vi/5PsnxDQvQpw/2.jpg">Everyday normal guy</h3>
    <p><iframe width="420" height="315" src="http://www.youtube.com/embed/5PsnxDQvQpw" frameborder="0" allowfullscreen></iframe></p>
        <h3><img src="http://img.youtube.com/vi/5PsnxDQvQpw/2.jpg">Everyday normal guy</h3>
    <p><iframe width="420" height="315" src="http://www.youtube.com/embed/5PsnxDQvQpw" frameborder="0" allowfullscreen></iframe></p>
        <h3><img src="http://img.youtube.com/vi/5PsnxDQvQpw/2.jpg">Everyday normal guy</h3>
    <p><iframe width="420" height="315" src="http://www.youtube.com/embed/5PsnxDQvQpw" frameborder="0" allowfullscreen></iframe></p>
        <h3><img src="http://img.youtube.com/vi/5PsnxDQvQpw/2.jpg">Everyday normal guy</h3>
    <p><iframe width="420" height="315" src="http://www.youtube.com/embed/5PsnxDQvQpw" frameborder="0" allowfullscreen></iframe></p>
        <h3><img src="http://img.youtube.com/vi/5PsnxDQvQpw/2.jpg">Everyday normal guy</h3>
    <p><iframe width="420" height="315" src="http://www.youtube.com/embed/5PsnxDQvQpw" frameborder="0" allowfullscreen></iframe></p>
        <h3><img src="http://img.youtube.com/vi/w68qZ8JvBds/2.jpg">Everyday normal guy</h3>
    <p>
        <object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/w68qZ8JvBds?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/w68qZ8JvBds?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    </p>
</div>

CSS

body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion2 {
    width: 480px;
    border-bottom: solid 1px #c4c4c4;
}
.accordion2 h3 {
    background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
    padding: 7px 15px;
    margin: 0;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    border: solid 1px #c4c4c4;
    border-bottom: none;
    cursor: pointer;
}
.accordion2 h3:hover {
    background-color: #e3e2e2;
}
.accordion2 h3.active {
    background-position: right 5px;
}
.accordion2 p {
    background: #f7f7f7;
    margin: 0;
    padding: 10px 15px 20px;
    border-left: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    display: none;
}

JavaScript

$(document).ready(function(){
    $(".accordion2 h3").eq(40).addClass("active");
    $(".accordion2 p").eq(40).show();
    $(".accordion2 h3").click(function(){
        var video = $(".accordion2 h3.active").next().children();
        var src = video.attr("src");
        video.attr("src","");
        video.attr("src",src);
        
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});