A Pen by Captain Anonymous on CodePen.
Created
July 30, 2015 10:51
-
-
Save perry-mitchell/af603c825aedcf5be7e3 to your computer and use it in GitHub Desktop.
EjOrpp
This file contains hidden or 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
| <html> | |
| <body> | |
| <div style="margin-left: 50px; margin-top: 150px"> | |
| <p>This is the default welcome page used to test the correct operation of the Apache2 server after installation on Ubuntu systems. It is based on the equivalent page on Debian, from which the Ubuntu Apache packaging is derived. If you can read this page, it means that the Apache HTTP server installed at this site is working properly. You should replace this file (located at /var/www/html/index.html) before continuing to operate your HTTP server.</p> | |
| <p>This is the default welcome page used to test the correct operation of the Apache2 server after installation on Ubuntu systems. It is based on the equivalent page on Debian, from which the Ubuntu Apache packaging is derived. If you can read this page, it means that the Apache HTTP server installed at this site is working properly. You should replace this file (located at /var/www/html/index.html) before continuing to operate your HTTP server.</p> | |
| <video controls> | |
| <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> | |
| <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> | |
| <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> | |
| <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> | |
| </video> | |
| <div class="overlay" style="background-color: rgba(0,0,255,0.35); display: none; z-index: 500"> | |
| <a href="#" id="play" style="width: 50px; height: 50px; background-color: green">Play</a> | |
| </div> | |
| <p>This is the default welcome page used to test the correct operation of the Apache2 server after installation on Ubuntu systems. It is based on the equivalent page on Debian, from which the Ubuntu Apache packaging is derived. If you can read this page, it means that the Apache HTTP server installed at this site is working properly. You should replace this file (located at /var/www/html/index.html) before continuing to operate your HTTP server.</p> | |
| <p>This is the default welcome page used to test the correct operation of the Apache2 server after installation on Ubuntu systems. It is based on the equivalent page on Debian, from which the Ubuntu Apache packaging is derived. If you can read this page, it means that the Apache HTTP server installed at this site is working properly. You should replace this file (located at /var/www/html/index.html) before continuing to operate your HTTP server.</p> | |
| </div> | |
| <script type="text/javascript"> | |
| document.querySelector("#play").addEventListener("click", function(e) { | |
| document.querySelector("video").play(); | |
| }, false); | |
| setTimeout(function() { | |
| var videoItem = document.querySelector("video"), | |
| overlayItem = document.querySelector("div.overlay"); | |
| function getElementPos(el) { | |
| var bodyRect = document.body.getBoundingClientRect(), | |
| elemRect = el.getBoundingClientRect(), | |
| offsetY = elemRect.top, | |
| offsetX = elemRect.left; | |
| return { | |
| left: offsetX, | |
| top: offsetY, | |
| width: el.offsetWidth, | |
| height: el.offsetHeight | |
| }; | |
| } | |
| function updateVideoElement(video, overlay, placeholder) { | |
| var videoPos = getElementPos(video); | |
| placeholder.style.width = overlay.style.width = videoPos.width; | |
| placeholder.style.height = overlay.style.height = videoPos.height; | |
| var placeholderPos = getElementPos(placeholder); | |
| video.style.left = overlay.style.left = placeholderPos.left; | |
| video.style.top = overlay.style.top = placeholderPos.top; | |
| } | |
| function initWithElement(video, overlay) { | |
| var placeholder = document.createElement("div"); | |
| overlay.style.display = "inherit"; | |
| overlay.style.position = "absolute"; | |
| placeholder.style.position = "relative"; | |
| video.parentNode.insertBefore(placeholder, video); | |
| video.style.position = "absolute"; | |
| updateVideoElement(video, overlay, placeholder); | |
| setInterval(function() { | |
| updateVideoElement(video, overlay, placeholder); | |
| }, 500); | |
| } | |
| initWithElement(videoItem, overlayItem); | |
| }, 2000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment