JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://theavcorp.com/_css/css-reset.css">

			<iframe 
				title="Incredible Singing Cat" 
				class="youtube-player" 
				width="100%" 
				height="250" 
				src="//www.sping.nl"
				allowfullscreen>
			</iframe>

CSS

html, body {
    width:100%;    
}
.table {
	width: 100%;
	padding: 0%;
    margin:0 0 1.5em 0;
    background-color:rgba(0,255,255,.2); /* for testing */
    display:table;
}
.cell {
	vertical-align: top;
    width:50%;
    background-color:rgba(0,0,255,.2); /* for testing */
	display: table-cell;
	padding: 0;
    margin:0 !important;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.cell:first-child {
    padding-right:10px;
    
}
.video {
    text-align: center;
    margin:0 auto;
    background-color:black;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
iframe {
    max-width: 100%;
}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media only screen and (max-width: 610px) {
	.cell { 
        width: 100% !important;
        margin: 0%;
        padding: 0%;
        display:block;
    }
    .table {
        display:block;
    }
    .video {
        height: 100%;
        width: 100%;
    }
}

@media only screen and (min-width: 1000px) {
    .table {
        margin: auto;
        width: 1000px;
    }
}

JavaScript

$(function() {
    var height = $(window).height();
    $('iframe').prop('height', height); 
});