iframe-video-overlay/index.css

Simple embed responsive video(YouTube, Vimeo, Daily Motion, Coub) overlay module.

.iframe-video-overlay{display:block}.iframe-video-overlay__container{position:relative;box-sizing:border-box;padding-bottom:56.25%;height:0;overflow:hidden}.iframe-video-overlay__container.opened .iframe-video-overlay__image{opacity:0!important}.iframe-video-overlay__container.opened .iframe-video-overlay__play{opacity:0!important}.iframe-video-overlay__container.hidden .iframe-video-overlay__image{display:none!important}.iframe-video-overlay__container.hidden .iframe-video-overlay__play{display:none!important}.iframe-video-overlay__image{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;opacity:1;z-index:2;transition:all .5s ease}.iframe-video-overlay__image:hover{filter:brightness(75%)}.iframe-video-overlay iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.iframe-video-overlay__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;background:0 0;background-repeat:no-repeat;background-size:contain;background-position:center;border:none;outline:0;cursor:pointer;opacity:1;z-index:4;transition:all .5s ease}