JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/examples/starter-template/starter-template.css&quot; rel=&quot;stylesheet"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="container">
    <div class="jumbotron text-center">
        <div class="row" id="some_id">
            <div class="col-md-6">
                 <h1>Heading<br>Text</h1>

                <p>Bacon ipsum dolor sit amet ham hock cow swine meatball salami short loin. Fatback boudin sausage ham. Meatloaf pork chop corned beef, andouille t-bone pancetta flank. Drumstick meatloaf pancetta bresaola, turducken biltong jowl prosciutto ground round kevin venison beef ribs shoulder chuck ham.</p> <a class="btn btn-success btn-lg" href="#">Submit</a>

            </div>
            <div class="col-md-6">
                <iframe id="iframe_id" src="http://fast.wistia.net/embed/iframe/huifu25cy3?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="440" height="248"></iframe>
                <script src="http://fast.wistia.net/assets/external/iframe-api-v1.js"></script>
            </div>
        </div>
    </div>
</div>
<!-- /.container -->

JavaScript

// Vertical center
				function vericalCenter() {
				    if ($('.container').width() > 969) {
				        $('#iframe_id').css({
				            "margin-top": ((($('#some_id').height() - $('#iframe_id').outerHeight()) / 2) + $('#some_id').scrollTop() + "px")
				        });
				    };
				};

				$(document).ready(function () {
				    vericalCenter();
				});

				$(window).resize(function () {
				    vericalCenter();
				});