HTML5 Video

codespector.css

/**
 * HTML5 Video
 */

body {  font-family: 'Arimo', sans-serif;}video {position: fixed;right: 0;bottom: 0;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: -100;background-size: cover;}/*****************************/.overlay {  width: 400px;  height: 400px;  border-radius: 50%;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  background: rgba(0,0,0,0.3);  display: block;  position: absolute;  top: 10%;  left: 50%;}.overlay h1 {  text-align: center;  padding-top: 100px;  color: #fff;  font-family: inherit;}.overlay p{  text-align: center;  width: 80%;  margin: 0 auto;  color: #fff;  font-family: inherit;  margin-bottom: 20px;}.overlay a {  color: #fff;}.orange {  text-decoration: none;} p a.orange {   color: #f27950; }

codespector.html

<video autoplay="" loop="" id="bgvid" poster="https://images.unsplash.com/photo-1461409971633-aa0e46732112?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925"><source type="video/webm" src="//easportsassets-a.akamaihd.net/pulse.content.easports.com/web/OnlineAssets/easports/2017/easports17-video-reel.webm"><source type="video/mp4" src="//easportsassets-a.akamaihd.net/pulse.content.easports.com/web/OnlineAssets/easports/2017/easports17-video-reel.mp4"  <img src="https://images.unsplash.com/photo-1458724338480-79bc7a8352e4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0e8fe82e7f50091319fdc635582bf62d" title="Your browser does not support the <video> tag"></video>    <div class="overlay">    <h1>HTML5 Video</h1>    <p>HTML5 Video overlay example, quite popular with a lot of creative sites.</p>    <p><a target="_BLANK" href="https://result.codespector.net/gist/9be73577b092ab6cbc3927fbacc7bf1b/7ad72fc075a105802fa8133a0e14faa04539195a">Fullscreen</a></p>         </div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","codespector_bootstrap":"","codespector_jquery":"","page":"all"}