You don't seem to have the table and table cell wrappers in place in that demo. Also you have no width to the table so it will be shrink to fit which means that the video wrapper min-width has no basis which is why the vdoe is hidden.
Try this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
height: 100%;
background: #000000;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width:100%;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.video-wrapper {
min-width: 40%;
max-width: 500px;
margin: auto
}
.ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="outer">
<div class="tcell">
<div class="video-wrapper">
<div class="ratio-keeper">
<iframe class="video-frame" width="2" height="2" src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
Also I removed the height:100% from the video wrapper because it would take up the whole height and the content would not appear centred because there's nothing to centre.
You could lose a div if you did this instead.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html,
body {
height: 100%;
background: #000000;
padding: 0;
margin: 0;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.video-wrapper {
min-width: 40%;
max-width: 500px;
height: 100%;
margin: auto;
display:table;
width:100%;
}
.ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="video-wrapper">
<div class="tcell">
<div class="ratio-keeper">
<iframe class="video-frame" width="2" height="2" src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>