title: HTML Replace css background-image to video
body: <p>I would like to replace and change my css background-image to video, does someone know how to make it ?
  Any way to change the image to uploaded video src? Without breaking the split left and right.</p>
  
  <p>The images was path under css. with .side-left {background-image: url('left.jpg');} i did try to change the source left.jpg to myvideo.mp4 but it seems doesnt work.</p>
  
  <p><strong>my html</strong></p>
  
  <pre><code>    &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div id="splitlayout" class="splitlayout"&gt;
                  &lt;div class="intro"&gt;
  
                  &lt;header class="codropsheader clearfix"&gt;
                              &lt;!--
                              &lt;span&gt;Rex Photography&lt;span class="bp-icon bp-icon-about" data-content="Photography is the science, art, application and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically ..."&gt;&lt;/span&gt;&lt;/span&gt;
                              --&gt;
  
                              &lt;a href="index.html"&gt;&lt;img class="headerlogo" src="logo2.jpg" title="PixPodium" alt="PixPodium"/&gt;&lt;/a&gt;
  
                              &lt;!--
                              &lt;nav&gt;
  
                                  &lt;a href="project.html" class="bp-icon bp-icon-prev" data-info="Go to Projects" &gt;&lt;span&gt;Go to Commercials&lt;/span&gt;&lt;/a&gt;
                                  &lt;a href="wedding.html" class="bp-icon bp-icon-next" data-info="Go to Weddings"&gt;&lt;span&gt;Go to Weddings&lt;/span&gt;&lt;/a&gt;
                                  &lt;!--
                                  &lt;a href="http://tympanus.net/codrops/?p=16693" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"&gt;&lt;span&gt;back to the Codrops article&lt;/span&gt;&lt;/a&gt;
                                  --&gt;
                                  &lt;!--
                                  &lt;a href="contact.html" class="bp-icon bp-icon-archive" data-info="Contact Us"&gt;&lt;span&gt;Contact Us&lt;/span&gt;&lt;/a&gt;
  
                              &lt;!--
                              &lt;/nav&gt;
                              --&gt;
  
  
                              &lt;div class="demos"&gt;
                                  &lt;a href="project.html"&gt;Commercials&lt;/a&gt;
                                  &lt;a href="wedding.html"&gt;Weddings&lt;/a&gt;
                                  &lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;
                              &lt;/div&gt;
  
                  &lt;/header&gt;   
                    &lt;div class="topWrapper" style ="display:none;"&gt;
                          &lt;div class="side side-left" &gt;
  
                              &lt;div class="intro-content"&gt;
                                  &lt;!--
  
                                  &lt;div class="profile"&gt;&lt;img src="img/profile1.jpg" alt="profile1"&gt;&lt;/div&gt;
  
                                  --&gt;
  
                                  &lt;a href="project.html"&gt;&lt;h1 &gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Commercials&lt;/span&gt;&lt;/h1&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="overlay"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class= "bottomWrapper" style = "display:none;"&gt;
                          &lt;div class="side side-right" &gt;
                              &lt;div class="intro-content"&gt;
                                  &lt;!-- Original Code Start
                                  &lt;h1 style="background-color:rgba(0, 0, 0, 0.5);"&gt;&lt;span &gt;Weddings&lt;/span&gt;&lt;span&gt;Weddings&lt;/span&gt;&lt;/h1&gt;
                                  Original Code End --&gt;
  
                                  &lt;a href="wedding.html"&gt;&lt;h1&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;Weddings&lt;/span&gt;&lt;/h1&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="overlay"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /intro --&gt;
  
  
              &lt;/div&gt;&lt;!-- /splitlayout --&gt;
          &lt;/div&gt;&lt;!-- /container --&gt;
  
  
      &lt;/body&gt;
          &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function(){
              $(".topWrapper").fadeIn(1000);
              $(".bottomWrapper").fadeIn(1000);
              //$(".topWrapper").fadeIn("slow");
              //$("#div3").fadeIn(3000);
  
          });
          &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>my css</strong></p>
  
  <pre><code>    html, body, 
  .container {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  body {
      overflow-y: scroll;
      /*
      background: #fff;
      */
      background: #fff;
  }
  
  .splitlayout {
      position: relative;
      overflow-x: hidden;
      min-height: 100%;
      width: 100%;
  }
  
  /* Intro sides */
  .side {
      position: fixed;
      /*top: 0; */
      z-index: 100;
      width: 50%;
      height: 100%;
      text-align: center;
      -webkit-backface-visibility: hidden;
  }
  
  .open-left .side,
  .open-right .side {
      cursor: default;
  }
  
  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 499;
      visibility: hidden;
      width: 100%;
      height: 100%;
      opacity: 0;
  }
  
  .side-left .overlay {
  
      background: rgba(0,0,0,0.7);
  
  }
  
  .side-right .overlay {
      background: rgba(0,0,0,0.3);
  }
  
  .side-left {
  
      /* Original code Start
      left: 0;
      background: #47a3da;
      color: #fff;
      outline: 1px solid #47a3da; /* avoid gap 
      Original Code End */
  
      left: 0;
      float: left;
      background-image: url('left.jpg');
                           /* &lt;------ */
      background-size: cover;                      /* &lt;------ */
      background-repeat: no-repeat;
      background-position: center center;              /* optional, center the image*/
      /*background: #47a3da;*/
      color: #fff;
      /*outline: 1px solid #47a3da; /* avoid gap */
  }
  
  .side-right {
      /* Original code Start
      right: 0;
      background: #fff;
      color: #47a3da;
      /*outline: 1px solid #fff; /* avoid gap */
  
      right: 0;
      background-image: url('right.jpg');
      background-size: cover;                      /* &lt;------ */
      background-repeat: no-repeat;
      background-position: center center;              /* optional, center the image*/
  
      color: #fff;
  }
  </code></pre>