title: HTML/CSS adding a video to a slider
body: <p>I am using flexslider on the homepage of my website and currently have images within it, which is fine. But I want to add a video I created which plays automatically and then resumes the action of the slider. I think my problem is in the formatting as I am not at all skilled in HTML or CSS etc. Here is the HTML for the slider:</p>
  
  <pre><code>    &lt;div class="flexslider"&gt;
        &lt;ul class="slides"&gt;
          &lt;li class="slideVideo"&gt;&lt;/li&gt;
          &lt;li class="slide1"&gt;&lt;a href="/portfolioMAIN.html#tabs-2"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="slide2"&gt;&lt;a href="/portfolioMAIN.html#tabs-1"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="slide3"&gt;&lt;a href="/portfolioMAIN.html#tabs-3"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and this is the code in the CSS.</p>
  
  <pre><code>    ul.slides li { height:350px; }
      ul.slides li.slide1 a { background:url("/images/doorstop_carousel.png") 0 0 no-repeat; background-size:cover; height:350px; display:block; }
      ul.slides li.slide2 a { background:url("/images/brisant_carousel.png") 0 0 no-repeat; background-size:cover; height:350px; display:block; }
      ul.slides li.slide3 a { background:url("/images/eurosecure_carousel.png") 0 0 no-repeat; background-size:cover; height:350px; display:block; }
      ul.slides li.slideVideo a { background:url("/videos/ident.mp4") 0 0 no-repeat; background-size:cover; height:350px; display:block; }
  </code></pre>
  
  <p>Any help is much appreciated. PS the video is uploaded to my server</p>