LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Hello from here and there

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti natus dignissimos deserunt aperiam eius voluptatibus tempora non ut ea nisi rem, iste enim voluptates hic assumenda, maiores molestiae labore, mollitia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit temporibus quasi praesentium ea earum. Nobis quis dolor doloremque hic tenetur voluptates necessitatibus pariatur asperiores, non provident quidem perferendis repudiandae molestiae in alias ea recusandae voluptatem autem voluptatum saepe iste voluptate eveniet quo. Adipisci amet voluptatem doloremque ea voluptas ut officiis quam necessitatibus numquam fugiat molestias, nihil repellat error. Vel laboriosam, sint animi! Eligendi laboriosam, molestias odit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi porro incidunt, sunt sed modi, dignissimos laborum quos repudiandae id eaque velit eligendi nesciunt aliquid assumenda suscipit, quidem nostrum hic saepe. Esse, voluptatem, maxime!

CSS
/* Lesson from https://www.sitepoint.com/video-scalable-backgrounds-css/ */

.video-container {
  width: 100%;
  height: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  background-image: url(https://s15.postimg.org/vbk4i8k7v/tech.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.video-container video{
  min-width: 100%;
  min-height: 100%;
  position: absolute;
/*  centering  */
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
}

.video-mask {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: rgba(0,0,0,.2);
}

/* page styles */
@media (min-width:500px) {
  body {
    font-size: 110%;
  }
}

#nav {
  background: gray;
  padding: 1em;
  text-transform: uppercase;
  color: #eee;
}

#intro {
  max-width: 500px;
  background: gray;
  background: rgba(128, 128, 128, 0.6);
  padding: 3em;
  margin: 3em auto;
  text-align: center;
  text-transform: uppercase;
  color: #eee;
}
#main-content {
  background: gray;
  padding: 1em;
  color: #eee;
}

Description

Just a basic background video that start automatically. There is still some issues on iOS that refuses to autoplay!
Term
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv