Video Container
CODE
×
HTML
<div class='video'> <div class='vid'></div> <div class='play-video enl-ico'></div> </div>
CSS
div.vid { height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative; background-image: url('../img/video-preview.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; } div.play-video.enl-ico { position:absolute; opacity: 0.9; height: 114px; width: 114px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left:50%; margin-left: -57px; background-image: url('../img/Play Button.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } @media screen and (max-width: 767px) { div.play-video.enl-ico { padding-top: 6px; width: 85px; height: 85px; min-height: 85px; margin-left: -42.5px; } }
JS
Video Container
×