.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: block;  
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
    margin: 15px auto 0 auto;
}

iframe {
  margin: 40px auto 0 auto;
}

.youtube .play {
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA3MDAgNzAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MDAgNzAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNTQuMywxMi43Yy04OS4zLDAtMTc0LjksMzUuNS0yMzgsOTguNmMtNjMuMSw2My4xLTk4LjYsMTQ4LjctOTguNiwyMzhzMzUuNSwxNzQuOSw5OC42LDIzOAoJYzYzLjEsNjMuMSwxNDguNyw5OC42LDIzOCw5OC42czE3NC45LTM1LjUsMjM4LTk4LjZjNjMuMS02My4xLDk4LjYtMTQ4LjcsOTguNi0yMzhjMC01OS4xLTE1LjYtMTE3LjEtNDUuMS0xNjguMwoJYy0yOS41LTUxLjItNzItOTMuNi0xMjMuMi0xMjMuMlM0MTMuMywxMi43LDM1NC4zLDEyLjdMMzU0LjMsMTIuN3ogTTQ4MS4xLDM4MS42TDMyMy42LDQ4NS43Yy04LjUsNS43LTE4LjgsOC0yOC45LDYuNwoJYy0xMC4xLTEuNC0xOS40LTYuNC0yNi4yLTE0LjFjLTYuNy03LjctMTAuNC0xNy42LTEwLjQtMjcuOFYyNDhjMC0xMC4yLDMuNy0yMC4xLDEwLjQtMjcuOGM2LjctNy43LDE2LTEyLjcsMjYuMi0xNC4xCgljMTAuMS0xLjQsMjAuNCwxLDI4LjksNi43bDE1Ny42LDEwNC4xYzEwLjgsNy4yLDE3LjMsMTkuNCwxNy4zLDMyLjRDNDk4LjQsMzYyLjMsNDkxLjksMzc0LjQsNDgxLjEsMzgxLjZMNDgxLjEsMzgxLjZ6Ii8+Cjwvc3ZnPgo=") no-repeat center center;
    background-size: 64px 64px;
    position: absolute;
    height: 100%;
    width: 100%;
   opacity: .8;
    filter: brightness(100);    transition: all 0.2s ease-out;
}

.youtube .play:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}