Video on browsers

Best way to put video on a responsive site.

by Vanessa RC

HTML

<!--[if lt IE 9]>
<script>
	document.createElement('video');
</script>
<![endif]-->
<div class="background-blue"></div>
<video autoplay loop poster="polina.jpg" id="bgvid" class="poster">
    <source src="http://www.comcarde.com/video/bokeh2.webm" type="video/webm">
    <source src="http://www.comcarde.com/video/bokeh2.mp4" type="video/mp4">
</video>
<!--<button id="vidpause">Pause</button>-->
<div>
  <div class="text" id="sentence">Life is <span id="swap"></span> no matter how you look at it.</div>
</div>

<div>
<span id='action' class='button'></span>
</div>

CSS

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    /* background: url(polina.jpg) no-repeat; */
    background-size: cover; 
}
/* Fix for IE as it doesn't understand the other tag*/
video { 
  display: block; 
}
 
@media screen and (max-device-width: 800px) {
    html {
         background: url(polina.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

video#bgvid {
    transition: 1s opacity;
}

.background-blue {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}


.stopfade { 
  opacity: .5; 
 }

.text {
  font-family: 'Helvetica', san-serif;
  font-size: 30px;
  font-weight: 400px;
  color: #fff;
}

.form-area {
  background-color: #fff;
  opacity: .5;
  margin: 0;
  padding: 20px;
  width: 30%;
}

.text {
  font-family: 'Helvetica', san-serif;
  font-size: 30px;
  font-weight: 400px;
  color: #aaa;
  margin: 0;
  padding: 0;
  text-align: center;
}

p#sentence{
  text-align:center;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:3em;
}

#swap{
  height:3em;
  width:0;
  vertical-align:top;
}
#swap>span{
  position:absolute;
  color:chocolate;
}

.button {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 80px;
  
}

.off {
  opacity: 1;
}

JavaScript

console.clear();

var vid = document.getElementById("bgvid");
var action = document.getElementById("action");
var actionText = ['play', 'stop'];


pauseButton = document.getElementById("vidpause");

function vidFade() {
    vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
    // only functional if "loop" is removed 
     vid.pause();
	// to capture IE10
	vidFade();
});
action.innerHTML = 'Stop';
vid.addEventListener('click', function() {
		vid.classList.toggle('stopfade');
  if (vid.paused) {
  vid.play();
  	action.innerHTML = 'Stop';
  } else {
  	vid.pause();
    action.innerHTML = 'Play';
  }
});


/* ===================================== */ 
$(function() { // DOM ready

  var txt = ['simple', 'incredible', 'wonderful'],
      n = txt.length,
      $swap = $('#swap'),
      $span,
      c = -1;

  // CREATE SPANS INSIDE SPAN
  for(var i=0; i<txt.length; i++) 		$swap.append($('<span />',{text:txt[i]}));
  // HIDE AND COLLECT THEM
  $span = $("span", $swap).hide(); 

  (function loop(){
    c = ++c % n;
    $swap.animate({width: $span.eq( c ).width() });
    $span.stop().fadeOut().eq(c).fadeIn().delay(3000).show(0, loop);
  }()); 
});
/* ===================================== */