Changes

/tropic/about-us/video-test/

/tropic/about-us/video-test/

Video Test

Video Test

body {

  margin: 0;

}



.videoContain {

	position: relative;

	height:100%;

	overflow: hidden;

	color:#cee8e3;

}

video { 

    position: absolute;

    top: 0px;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: -100;

    transform: translateX(-50%) translateY(0%);

 background: black url('//demosthenes.info/assets/images/polina.jpg') no-repeat;

  background-size: cover;

  transition: 1s opacity;

}

.stopfade { 

   opacity: .8;

}



h1 {

  font-size: 3rem;

  text-transform: uppercase;

  margin-top: 0;

  letter-spacing: .3rem;

}

#polina button { 

  display: block;

  width: 80%;

  padding: .4rem;

  border: none; 

  margin: 1rem auto; 

  font-size: 1.3rem;

  background: rgba(255,255,255,0.23);

  color: #fff;

  border-radius: 3px; 

  cursor: pointer;

  transition: .3s background;

}

.pause {

	display: inline-block; 

	padding:10px;

	background: rgba(0,0,0,0.8);

	

}



.pause:hover { 

   background: rgba(0,0,0,0.5);

   

}







@media screen and (max-device-width: 800px) {

  .videoContain { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center; background-size: cover; }

  #bgvid { display: none; }

}

body {

  margin: 0;

}



.videoContain {

	position: relative;

	height:100%;

	overflow: hidden;

	color:#cee8e3;

}

video { 

    position: absolute;

    top: 0px;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: -100;

    transform: translateX(-50%) translateY(0%);

 background: black url('//demosthenes.info/assets/images/polina.jpg') no-repeat;

  background-size: cover;

  transition: 1s opacity;

}

.stopfade { 

   opacity: .8;

}



h1 {

  font-size: 3rem;

  text-transform: uppercase;

  margin-top: 0;

  letter-spacing: .3rem;

}

#polina button { 

  display: block;

  width: 80%;

  padding: .4rem;

  border: none; 

  margin: 1rem auto; 

  font-size: 1.3rem;

  background: rgba(255,255,255,0.23);

  color: #fff;

  border-radius: 3px; 

  cursor: pointer;

  transition: .3s background;

}

.pause {

	display: inline-block; 

	padding:10px;

	background: rgba(0,0,0,0.8);

	

}



.pause:hover { 

   background: rgba(0,0,0,0.5);

   

}







@media screen and (max-device-width: 800px) {

  .videoContain { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center; background-size: cover; }

  #bgvid { display: none; }

}

var vid = document.getElementById("bgvid");

var pauseButton = document.querySelector(".videoContain .pause");



if (window.matchMedia('(prefers-reduced-motion)').matches) {

    vid.removeAttribute("autoplay");

    vid.pause();

    pauseButton.innerHTML = "Resume video";

}



function vidFade() {

  vid.classList.add("stopfade");

}



vid.addEventListener('ended', function()

{

// only functional if "loop" is removed 

vid.pause();

// to capture IE10

vidFade();

}); 





pauseButton.addEventListener("click", function() {

  vid.classList.toggle("stopfade");

  if (vid.paused) {

    vid.play();

    pauseButton.innerHTML = "Pause video";

  } else {

    vid.pause();

    pauseButton.innerHTML = "Resume video";

  }

})

var vid = document.getElementById("bgvid");

var pauseButton = document.querySelector(".videoContain .pause");



if (window.matchMedia('(prefers-reduced-motion)').matches) {

    vid.removeAttribute("autoplay");

    vid.pause();

    pauseButton.innerHTML = "Resume video";

}



function vidFade() {

  vid.classList.add("stopfade");

}



vid.addEventListener('ended', function()

{

// only functional if "loop" is removed 

vid.pause();

// to capture IE10

vidFade();

}); 





pauseButton.addEventListener("click", function() {

  vid.classList.toggle("stopfade");

  if (vid.paused) {

    vid.play();

    pauseButton.innerHTML = "Pause video";

  } else {

    vid.pause();

    pauseButton.innerHTML = "Resume video";

  }

})

0

0

0

0

0

0

0.5

0.5

0

0

1

1

1

1

0

0

0

0

/tropic/about-us/

/tropic/about-us/

0

0

6

6

0

0