JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://releases.flowplayer.org/5.3.2/commercial/flowplayer.min.js"></script>
<link rel="stylesheet" href="http://releases.flowplayer.org/5.3.2/skin/minimalist.css">
<script src="https://raw.github.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.min.js"></script>
<div class="video">
    <div class="video-container">BeionHD
        <br>
        <div class="banner" style="background: #000 url('http://memylo.eu/www/header.png') no-repeat 50%;"></div>
        <div class="flowplayer no-time no-volume play-button" data-logo="http://memylo.eu/www/logo.svg">
            <video preload='none'>
                <source type="video/mp4" src="http://www.memylo.eu/video/_src/ichange.mp4" />
            </video>
        </div>
    </div>
</div>

CSS

.video {
    border: 1px solid red;
    height: 10em;
    cursor: pointer;
    margin-bottom: 1em;
    background: #000;
    color: #ffffff;
    overflow: hidden;
}
.video-container {
    text-align: center;
    margin: 0px auto;
}

JavaScript

//animate height
$.fn.animateHeight = function (container) {
    var thisHeight = $(container).map(function (i, e) {
        return $(e).height();
    }).get();

    return this.animate({
        height: thisHeight
    });
};

$(".video").on("click", function () {
    $(this).animateHeight(".video-container");
});

$(".video").resize(function (e) {
    $(this).animateHeight(".video-container");
});