<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
  <ol class="carousel-indicators">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>
      <li data-target="#carousel" data-slide-to="3"></li>
  </ol>
  
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item active">
      <div class="slide-content">
        <video poster="http://192.241.175.50/videos/london.jpg" webkit-playsinline id="bgvid" loop>
          <source src="http://192.241.175.50/videos/london.webm" type="video/webm">
          <source src="http://192.241.175.50/videos/london.mp4" type="video/mp4">
        </video>
        <div class="slide-overlay door">
          <div class='title'>Slide 1</div>
          <div class="description"> The First Description </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="slide-content">
        <video poster="http://192.241.175.50/videos/boston.jpg" webkit-playsinline id="bgvid" loop>
          <source src="http://192.241.175.50/videos/boston.webm" type="video/webm">
          <source src="http://192.241.175.50/videos/boston.mp4" type="video/mp4">
        </video>
        <div class="slide-overlay door">
          <div class='title'> Slide 2 </div>
          <div class="description"> The Second Description </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="slide-content">
        <video poster="http://192.241.175.50/videos/split.jpg" webkit-playsinline id="bgvid" loop>
          <source src="http://192.241.175.50/videos/split.webm" type="video/webm">
          <source src="http://192.241.175.50/videos/split.mp4" type="video/mp4">
        </video>
        <div class="slide-overlay door">
          <div class='title'>Slide 3</div>
          <div class="description"> #AnotherOne #AndAnotherOne</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="slide-content">
        <video poster="http://192.241.175.50/videos/samo.jpg" webkit-playsinline id="bgvid" loop>
          <source src="http://192.241.175.50/videos/samo.webm" type="video/webm">
          <source src="http://192.241.175.50/videos/samo.mp4" type="video/mp4">
        </video>
        <div class="slide-overlay door">
          <div class='title'>Slide 4</div>
          <div class="description"> #PapaBlessUp </div>
        </div>
      </div>
    </div>
  </div>
  
  <a class="carousel-control left" href="#carousel" data-slide="prev">
   <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  
  <a class="carousel-control right" href="#carousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  
</div>

html, body
  height: 100%
  
.carousel
  width: 100%
  background-color: #000
  height: 100%

.carousel-fade .carousel-inner .item
  -webkit-transition-property: opacity
  transition-property: opacity

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right
  opacity: 0

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right
  opacity: 1

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right
  left: 0
  -webkit-transform: translate3d(0, 0, 0)
  transform: translate3d(0, 0, 0)

.carousel-fade .carousel-control
  z-index: 2
  display: flex
  justify-content: center
  align-items: center
 
  .glyphicon
    font-size: 6rem;

.carousel,
.carousel-inner,
.carousel-inner .item
  height: 100%

.stopfade
  opacity: .5

.slide-content
  color: #FFF
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  min-height: 100%
  
  video
    position: absolute
    top: 50%
    left: 50%
    min-width: 100%
    min-height: 100%
    width: auto
    height: auto
    z-index: 0
    -webkit-transform: translateX(-50%) translateY(-50%)
    transform: translateX(-50%) translateY(-50%)
    -webkit-transition: 1s opacity
    transition: 1s opacity

  video::-webkit-media-controls-start-playback-button
    display: none !important
    -webkit-appearance: none

 
.door
  font-family: Revista-Black
  display: flex
  justify-content: center
  flex-direction: column
  align-items: center
  height: 100%
  width: 100%
  z-index: 1
  
  .title
    font-size: 14rem
    text-transform: uppercase
    letter-spacing: .3rem
    line-height: 13rem;

  .description
    border-top: 1px solid white;
    margin-top 15px;
    font-size: 4rem;

// If not iPhone, play first video and setup event handlers for  carousel rotations
// iPhone will not play videos inline, and will take control of the browser
if(!/iPhone/i.test(navigator.userAgent)) {
    $('.active > div > video').get(0).play();

    $('#carousel').bind('slide.bs.carousel', function(e) {
      $(e.relatedTarget).find('video').get(0).play();
    });

    $('#carousel').bind('slid.bs.carousel', function(e) {
      $('video').not('.active > div > video').each(function() {
        $(this).get(0).pause();
      });
    });
  }