@keyframes modal-video { from { opacity: 0 } to { opacity: 1 } } @keyframes modal-video-inner { from { transform: translate(0, 100px) } to { transform: translate(0, 0) } } .modal-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); z-index: 1000000; cursor: pointer; opacity: 1; animation-timing-function: ease-out; animation-duration: .3s; animation-name: modal-video; -webkit-transition: opacity .3s ease-out; -moz-transition: opacity .3s ease-out; -ms-transition: opacity .3s ease-out; -o-transition: opacity .3s ease-out; transition: opacity .3s ease-out } .modal-video-close { opacity: 0 } .modal-video-close .modal-video-movie-wrap { -webkit-transform: translate(0, 100px); -moz-transform: translate(0, 100px); -ms-transform: translate(0, 100px); -o-transform: translate(0, 100px); transform: translate(0, 100px) } .modal-video-body { max-width: 940px; width: 100%; height: 100%; margin: 0 auto; display: table } .modal-video-inner { display: table-cell; vertical-align: middle; width: 100%; height: 100% } .modal-video-movie-wrap { width: 100%; height: 0; position: relative; padding-bottom: 56.25%; background-color: #333; animation-timing-function: ease-out; animation-duration: .3s; animation-name: modal-video-inner; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform .3s ease-out; -moz-transition: -moz-transform .3s ease-out; -ms-transition: -ms-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out } .modal-video-movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .modal-video-close-btn { position: absolute; z-index: 2; top: -40px; right: -13px; display: inline-block; width: 35px; height: 35px; overflow: hidden; border: none; background: transparent } .modal-video-close-btn:before { transform: rotate(45deg) } .modal-video-close-btn:after { transform: rotate(-45deg) } .modal-video-close-btn:before, .modal-video-close-btn:after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #fff; border-radius: 5px; margin-top: -6px }