JSFiddle - React, Tailwind, and code Playground

by Craig Haywood

HTML

<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&modestbranding=1&controls=0&enablejsapi=1&mute=1&autoplay=1"frameborder="0"></iframe>
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&showinfo=0&mute=1&autoplay=1"frameborder="0"></iframe>

CSS

body{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
}

.background{
         width: 100%;
         height: 100%;
         background: darkseagreen;
         display: flex;
         justify-content: center;
         align-items: center;
}

.videoWrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        justify-content: center;
        align-items: center
    }

    .cover {
        position: absolute;
        height: calc((680px - (400px * (9 / 16))) / 2);
        width: 100%;
        background: green;
        opacity: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 20px;
        text-align: center;
    }

    header {
        top: 0;
    }

    footer {
        bottom: 0;
    }