JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div id="block-block-26">
    <div class="video-callout-container clearfix">
        <h2 id="block-expand-title">
		<span class="why">Inside Academics <span class="br">at Denison</span></span> 
		<span class="magic">The buzz on the street gets it right: Our professors are the best.</span> They are at the center of Denison's position as a national leader in both student engagement and academic rigor.</h2>
        <div class="video-close">X</div>
        <div id="video-callout" class="video-callout-content clearfix">
            <div class="video">
                <div class="containing-block">
                    <div class="outer-container">
                        <div class="video-embed clearfix">
                            <div class="video-container">
                                <iframe class="youtube-video" width="100%" height="574" src="//www.youtube.com/embed/Q4pPL7gc-aY?modestbranding=1&showinfo=0&vq=hd720&controls=2" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

SCSS

body {
    background: red;
}

#block-block-26 {
    background: #f2f2f2 !important;
    width: 100%;
    height: auto;
    min-height: 40px;
    margin: 0 auto;
    //margin: -30px 0 50px;
    //padding: 60px 0 40px;
    -webkit-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
    overflow: hidden;
}

.video-callout-container {
    display: block;
    margin: 0 auto;
    width: 1020px;
    background: url('../images/background_whats_happening_down_arrows.png') no-repeat center bottom;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    padding: 30px 0 40px;
    background: url('../images/background_whats_happening_down_arrows.png') no-repeat center 90%;
    //border-top: 30px solid #000;
    &.expanded {
        height: auto;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        .video-callout-content {
            display: block;
            width: 90%;
            margin: 0 auto;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }
        .video-close {
            display: inline-block;
        }
    }
}

#block-expand-title {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    clear: both;
    width: 55%;
    margin-bottom: 20px;
    padding-right: 3%;
    padding-left: 5%;
    color: #555;
    @include Didot-Italic;
    font-size: 1.6em;
    line-height: 150%;
    text-align: center;
    text-align: left;
    cursor: pointer;
    -webkit-transition: color .3s linear;
    -moz-transition: color .3s linear;
    transition: color .3s linear;
    span.why {
        display: block;
        margin: 0 0 6px;
        @include Didot-Italic;
        font-size: 1.7em;
        color: #333;
        text-transform: uppercase;
        -webkit-transition: color .3s linear;
        -moz-transition: color .3s linear;
        transition: color .3s linear;
    }
    span.magic {
       ...

JavaScript

$('#block-block-26 .video-callout-container').on('click', function() {
    $(this).toggleClass('expanded');
    $('#block-block-26 .video-callout-container iframe.youtube-video').attr('src', $('#block-block-26 .video-callout-container iframe.youtube-video').attr('src') + '&iv_load_policy=3&version=3&enablejsapi=1&wmode=transparent&autoplay=1'); // Faux autoplay
});
$('#block-block-26 .video-callout-container .youtube-video').on('click', function() {
    $('#block-block-26 .video-callout-container').toggleClass('expanded');
});