Turn the lights off (video)

This is a lightbox css/jquery feature with the html5 video player. What is a turn the lights off (video) How do you make a turn the lights off (video)? This script and codes were developed by Gabriel on 21 September 2021, Tuesday.

How do I make an turn the lights off (video)?
  1. Turn the lights off (video) Previews
  2. Turn the lights off (video) HTML Codes
  3. Turn the lights off (video) CSS Codes
  4. Turn the lights off (video) JS Codes
Turn the lights off (video) Previews

Turn the lights off (video) HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Turn the lights off (video)</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/fonts/fontawesome-webfont.woff'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Cabin:400,700'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      /* "theme" */

body {
  font-family: 'Cabin', sans-serif;
  text-align: center;
  background: #f0f0f0;
  color: #222;
}

h1 {text-transform: uppercase;}

/* video */

video {
  position: relative;
  width: 640px;
  height: auto;
  z-index: 2;
  box-shadow: 0 8px 12px -6px black;
}

/* button */

.togglelight {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  text-align: center;
  line-height: 40px;
  width: 35px;
  height: 35px;
  background: #ddd;
  border-bottom-left-radius: 5px;
  transition: background .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.togglelight.lightsoff {
  background: #222;
  color: #ddd;
}

.togglelight .fa {
  font-size: 25px;
  transition: color .2s ease;
}

.togglelight:active { box-shadow: 0 0 10px #222; }
.togglelight:hover { background: #5ec23c; }
.togglelight:hover .fa { color: #fff; }

/* overlay */

.overlay {
  display: none;
  z-index: 1;
  position:  fixed;
  top: 0;
  background: rgba(10,10,10,.9);
  width: 100%;
  height: 100%;
}

/* footer */

.cc {
  width: 100%;
  bottom: 0;
  position: fixed;
  color: #aaa;
  text-transform: uppercase;
  font-size: 11px;
  background: #222;
  word-spacing: 2px;
}

.cc a {
  color: #5ec23c;
  text-decoration: none;
}

.cc > span {
  padding: 0 5px;
}

.cc a > span {
  color: #aaa;
  text-decoration: none;
}

/* additional feature: responsive */

@media screen and (max-width: 650px) , screen and (max-height: 450px) {
  video {
    width: 400px;
    height: auto;
  }
}


    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <!-- overlay -->
<div class="overlay"></div>
<!-- lightbulb -->
<div class="togglelight" title="click to toggle the lights mode">
  <i class="fa fa-lightbulb-o"></i>
</div>
<h1>Turn the lights off!</h1>
<!-- video -->
<video autoplay loop controls>
  <source src="http://gabrielw.de/dev/_storage/1000_miles_640x360.mp4">
</video>
<!-- footer -->
<div class="cc">
  <p>
    video <a href="http://vimeo.com/65809502">1000 miles <span>by</span> daniel azulai bittencourt</a> (CC BY-NC-SA 3.0)
  </p>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Turn the lights off (video) CSS Codes

/* "theme" */

body {
  font-family: 'Cabin', sans-serif;
  text-align: center;
  background: #f0f0f0;
  color: #222;
}

h1 {text-transform: uppercase;}

/* video */

video {
  position: relative;
  width: 640px;
  height: auto;
  z-index: 2;
  box-shadow: 0 8px 12px -6px black;
}

/* button */

.togglelight {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  text-align: center;
  line-height: 40px;
  width: 35px;
  height: 35px;
  background: #ddd;
  border-bottom-left-radius: 5px;
  transition: background .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.togglelight.lightsoff {
  background: #222;
  color: #ddd;
}

.togglelight .fa {
  font-size: 25px;
  transition: color .2s ease;
}

.togglelight:active { box-shadow: 0 0 10px #222; }
.togglelight:hover { background: #5ec23c; }
.togglelight:hover .fa { color: #fff; }

/* overlay */

.overlay {
  display: none;
  z-index: 1;
  position:  fixed;
  top: 0;
  background: rgba(10,10,10,.9);
  width: 100%;
  height: 100%;
}

/* footer */

.cc {
  width: 100%;
  bottom: 0;
  position: fixed;
  color: #aaa;
  text-transform: uppercase;
  font-size: 11px;
  background: #222;
  word-spacing: 2px;
}

.cc a {
  color: #5ec23c;
  text-decoration: none;
}

.cc > span {
  padding: 0 5px;
}

.cc a > span {
  color: #aaa;
  text-decoration: none;
}

/* additional feature: responsive */

@media screen and (max-width: 650px) , screen and (max-height: 450px) {
  video {
    width: 400px;
    height: auto;
  }
}

Turn the lights off (video) JS Codes

/* show/hide overlay & toggle style of button */
$('.togglelight').click(function(){
  $(this).toggleClass('lightsoff');
  $('.overlay').fadeToggle(400);
});

/* set video volume to 25% */
$('video')[0].volume = 0.15;

/* 
 * tested with:
 * chrome 31 and Firefox 23 @ Win 7
 *
 */
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.