Last active
January 19, 2021 18:52
-
-
Save moqmar/ef34c78acf2788100548 to your computer and use it in GitHub Desktop.
Pure CSS implementation of coverr.co
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header class="coverr"><!-- The box you want the video as a background for: just add the "coverr" class --> | |
| <div class="coverr-video"> | |
| <img src="[JPEG URL]" alt=""> | |
| <video autoplay loop> | |
| <source src="[MP4 URL]" type="video/mp4"> | |
| <source src="[WEBM URL]" type="video/webm"> | |
| <!-- Non-HTML5 browsers will just show the image, no need for a fallback text --> | |
| </video> | |
| </div> | |
| <!-- The box content --> | |
| <!-- ..... --> | |
| </header> | |
| <!-- Resize the Coverr immediately: we don't want blank space while parsing! --> | |
| <script>window.coverrUpdate()</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Put this into your <head> | |
| window.coverrUpdate = function() { | |
| var coverrs = document.getElementsByClassName("coverr-video"); | |
| for (var i = 0; i < coverrs.length; i++) { var coverr = coverrs[i], coverrWrapper = coverr.parentElement; | |
| if (coverrWrapper.offsetWidth / coverrWrapper.offsetHeight < 16/9) | |
| coverr.style.width = (coverrWrapper.offsetHeight * (16/9)) + "px"; | |
| else coverr.style.width = null; | |
| coverr.getElementsByTagName("video")[0].style.display = "block"; | |
| } | |
| } | |
| window.addEventListener("resize", window.coverrUpdate); | |
| window.addEventListener("load", window.coverrUpdate); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .coverr // We don't want our video to leak out of the box containing it, so we need a wrapper with overflow: hidden | |
| position: relative | |
| overflow: hidden | |
| &>*:not(.coverr-video) | |
| z-index: 1 // Fix some z-index magic in some browsers | |
| &>.coverr-video // The video - a 16:9 container which at least fills the container | |
| &, img, video, &:after | |
| top: 0; left: 0 // [!] The fixed corner - in this case, the top left corner of the video won't change | |
| position: absolute | |
| width: 100% | |
| min-height: 100% // Users without JavaScript should at least see the picture filling out the container | |
| img, video, &:after | |
| height: 100% | |
| video | |
| display: none // We will display the video in JavaScript so users without JavaScript will just see the picture | |
| &:after // Filter layer | |
| content: "" | |
| display: block | |
| background: rgba(0, 0, 0, 0.4) | |
| &:before // Keep aspect ratio: http://www.mademyday.de/css-height-equals-width-with-pure-css.html | |
| content: ""; | |
| display: block; | |
| padding-bottom: 56.25% |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .coverr { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .coverr>*:not(.coverr-video) { | |
| z-index: 1; | |
| } | |
| .coverr>.coverr-video, | |
| .coverr>.coverr-video img, | |
| .coverr>.coverr-video video, | |
| .coverr>.coverr-video:after { | |
| top: 0; | |
| left: 0; | |
| position: absolute; | |
| width: 100%; | |
| min-height: 100%; | |
| } | |
| .coverr>.coverr-video img, | |
| .coverr>.coverr-video video, | |
| .coverr>.coverr-video:after { | |
| height: 100%; | |
| } | |
| .coverr>.coverr-video video { | |
| display: none; | |
| } | |
| .coverr>.coverr-video:after { | |
| content: ""; | |
| display: block; | |
| background: rgba(0,0,0,0.4); | |
| } | |
| .coverr>.coverr-video:before { | |
| content: ""; | |
| display: block; | |
| padding-bottom: 56.25%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment