title: How to fix a background video that stopped working on certain browsers
body: <p>Okay here's what happened.</p>
  
  <p>My background video was working on all browsers previously. Then Suddenly this morning it stopped working on some browsers. The video no longer player or freezes immediately</p>
  
  <p>I cleared my cache and nothing. Then I tried reverting the changes and nothing. I also tried writing it again from scratch and nothing.</p>
  
  <p>The last thing I tried is adding this script code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt; $(document).ready(function() { var vid = document.getElementById("bgvid"); vid.play(); }); &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The website is www.medshopandbeyond.com.</p>
  
  <p>The background video does not work on chrome, opera, safari. It loads SOMETIMES on firefox and it ALWAYS plays on Internet Explorer.</p>
  
  <p>How can I fix this? Your help is truly appreciated</p>
  
  <p>HTML Markup of Video and Content:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> {% if template == 'index' %}
  &lt;!--&lt;div id="slideshow-shadow"&gt;&lt;/div&gt;--&gt;
  
        &lt;div class="video-background" id="video-background"&gt;
          &lt;video  loop="loop" autoplay poster="{{ 'photo-1445.jpg' | asset_url }}" width="100%"&gt;
              &lt;source src="{{ 'Newest4.mp4' | asset_url }}" type="video/mp4"&gt;
              &lt;source src="{{ 'Newest4.webm' | asset_url }}" type="video/webm"&gt;
              &lt;source src="{{ 'home.ogg' | asset_url }}" type="video/ogg"&gt;
              &lt;img alt="" src="{{ 'home-placeholder.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below"&gt;
          &lt;/video&gt;
     &lt;div class="headline_22"&gt;
   &lt;table&gt;
        &lt;tr&gt;&lt;td width="50%"&gt;&lt;/td&gt;&lt;td width="50%" class="headline_content"&gt;
      &lt;h1&gt;Beyond Limitations&lt;/h1&gt;
      &lt;p&gt;Med Shop and Beyond stands for Freedom, Lifestyle, Wellness and Family. We strive to provide high quality medical supplies and equipment to our customers&lt;/p&gt;
     &lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td width="50%"&gt;&lt;/td&gt;&lt;td width="50%" class="tb_action"&gt;
      &lt;a href="http://www.medshopandbeyond.com/collections/all" class="btn_action_22"&gt;
       &lt;span&gt;Start Shopping&lt;/span&gt;
       &lt;i class="ico_arrow"&gt;&lt;/i&gt;
      &lt;/a&gt;
     &lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;/tr&gt;
   &lt;/table&gt;
  &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>CSS of the Video:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.video-background {
      height: 58em;
      left: 0;
      overflow: hidden;
      /*position: fixed;
      top: 96px;*/
      vertical-align: top;
      width: 100%;
      /*z-index: -1; */
   margin-top:-16px;
      position:relative;
      margin-bottom: 0px;
      -webkit-filter: brightness(95%);
      -moz-filter: brightness(95%);
      -khtml-filter: brightness(95%);
      -ms-filter: brightness(95%);
      -o-filter: brightness(95%);
      
  }
  div.video-background video {
      min-height: 850px;;
      min-width: 100%;
      z-index: -2 !important;
  }
  div.video-background &gt; div {
      height: 850px;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 10;
  }
  div.video-background .circle-overlay {
      left: 50%;
      margin-left: -590px;
      position: absolute;
      top: 120px;
  }
  div.video-background .ui-video-background {
      display: none !important;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>CSS of Content:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/************* 
  Call to Action Button - Style 22
   ******************/
  .btn_action_22 {
   background: #00559f !important;  /* Change button background color */
   border: 1px solid #00559f !important; /* Change button border color */
   color: #fff !important; /* Change button text color */
   line-height: 1.2;
   font-size: 30px;
   display: inline-block;
   padding: 22px 45px 23px;
   position: absolute;
   text-decoration: none;
   text-transform: uppercase;
   z-index: 3;
   white-space: nowrap;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
      font-family: Lato;
      font-weight: 100;
  
  }
  .btn_action_22 span {
   left: 12px;
   position: relative;
   -o-transition: all .4s;
   -moz-transition: all .4s;
   -webkit-transition: all .4s;
   transition: all .4s;
  }
  .btn_action_22 .ico_arrow {
   background: url(ico_arrow_w.png) 0 center no-repeat; 
   display: inline-block;
   height: 16px;
   width: 18px;
   position: relative;
   left: 0;
   top: 0px;
   opacity: 0;
   filter: alpha(opacity=0);
   -o-transition: all .4s;
   -moz-transition: all .4s;
   -webkit-transition: all .4s;
   transition: all .4s;
  }
  .btn_action_22:hover {
   background: #69d617 !important; /* Change button background color when mouse over */
   color: #000 !important; /* Change button text color when mouse over */
      border:1px solid #69d617 !important;
  }
  .btn_action_22:hover span {
   left: -12px;
  }
  .btn_action_22:hover .ico_arrow {
   opacity: 1;
   filter: alpha(opacity=100);
   left: 12px;
  }
  /**************  Headline Item *************/
  .headline_22 {
   background-image:url("{{ 'man-909049_1920.jpg' | asset_url }}"); 
      height: 70em;
      position: relative;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      margin-bottom: -20px;
      background-position: center top;
      width: 100%;
      margin-top: 220px;
      /*border-bottom: 1px solid #e6e6e6;*/
   color: #000 !important; /* Change headline background color */ 
      display:inline-block;
  }
  .headline_22 h1 {
   color: #000 !important; /* Change headline title text color */
   font-size: 52px;
   line-height: 1.2;
   text-transform: uppercase;
   font-weight: 100;
      font-family: Lato;
   padding: 0;
   margin: -1px 0 9px;
      background-color:#fff;
      opacity:0.5;
  }
  
  .headline_22 p {
   line-height: 1.4;
   font-size: 39px;
   margin: 0 0 10px;
   padding: -10px;
      font-family: Lato;
      font-weight: 100;
      word-spacing: -1px;
      background-color:#fff;
      opacity:0.5;
  }
  .headline_22 table {
   border-spacing: 0;
   width: 100%;
      
  }
  .headline_22 td {
   vertical-align: top;
   padding: 25px;
  }
  .headline_22 .headline_content {
   padding: 20px 25px 9px;
   text-align: justify;
  }
  @media (max-width: 979px) {
   .headline_22 .headline_content {
    text-align: center;
          
   }
   .headline_22 td {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
          
   }
   .btn_action_22 {
    text-align: center;
    width: 100%;
          margin-left: -2px;
          
   }
  }
  @media (max-width: 479px) {
   .btn_action_22 {
    padding: 18px 30px;
          margin-left: -2px;
          
   }
  }</code></pre>
  </div>
  </div>
  </p>