How would this be done using CSS?
https://jsfiddle.net/r84hpL56/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.play {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
height: 90px;
border-radius: 50%;
fill: red;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
cursor: pointer;
}
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
background: blue;
}
.video-wrapper {
max-width: 720px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ratio-keeper {
position: absolute;
top: 0;
bottom: 0;
height: 0;
padding-top: 56.25%;
width: 100%;
margin: auto;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hide {
display: none;
}
<div class="outer">
<div class="tcell">
<div class="container hide ">
<div class="video-wrapper">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div>
</div>
</div>
</div>
</div>
</div>
<svg class="play " width="100%" height="100%" viewBox="0 0 64 64">
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</svg>
</div>
(function manageCover() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const thewrap = cover.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
}());