Video not playing - help using video tag

The video is not showing up when I view on a live server. It does show up when I view locally on my computer. Not sure what is wrong… Any ideas?
Here is the html/css for the video section. Here’s a link to the live page: http://aaronhaas.com/labelle2/

  <style type="text/css">
    .hero-area{
      width:100%;
      height:900px;
      border-left:none;
      border-right:none;
      position: relative;
      padding:20px;
    }
    .video-container{
      position: absolute;
      top:0;
      left:0;
      height:100%;
      width:100%;
      overflow: hidden;
      /*background-image: url("assets/img/header-bg-2.jpg"); */
      height: 900px;
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover; 
    }
    video{
      position: absolute;
      z-index: -1;
      opacity: .78;
      width: 100%;
    }
  </style>

<div class="hero-area">
  <div class="video-container">
    <video  preload="true" autoplay = "autoplay" loop = "loop" volume= "0" poster="assets/img/header-bg-2.jpg">
       <!--  assets/img/header-bg-2.jpg -->
      <source src="http://aaronhaas.com/labelle2/assets/video/intro.mp4" type="video/mp4">
      <source src="http://aaronhaas.com/labelle2/assets/video/intro.ogg" type="video/ogg">
      <source src="http://aaronhaas.com/labelle2/assets/video/intro.webm" type="video/webm">
    </video>
  </div><!-- close video-container -->
</div> <!-- end header-container -->

Hi there aaron4osy,

try adding the muted attribute to your video element. :winky:

Most modern browsers don’t allow autoplay without it.

coothead

3 Likes

that did it… Thanks!!!

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

Off-topic:

I notice you have a horizontal scrollbar on the viewport caused by the fact that you used a row in your footer that was not inside a container (or fluid-container). To fix it either remove the class .row from the element .blackBg or instead add the fluid-container class to the footer.

In bootstrap you cannot use rows or columns in isolation.:slight_smile: