Menu icon Foundation
Problem with mobile frontpage and video

I'm working on the index page for my site and wanted to have two different appearances depending on the screen size and everything works but for some reason the hide-for-small class isn't affecting the video that isn't playing on small devices anyways so I end up with a black background.

you can see it for yourself here http://www.twentyonemedia.com/index_small.html

I've been over the code so many times now but just can't figure it out - help would be much appreciated.
Thanks

<div class="row ">
<div class="hide-for-small">

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="js/jquery.backgroundvideo.min.js"></script>
  
<script>
  $(document).ready(function() {
    var videobackground = new $.backgroundVideo($('body'), {
      "align": "centerXY",
      "width": 1280,
      "height": 720,
      "path": "video/",
      "filename": "splash720",
      "types": ["mp4","ogg","webm"]
    });
  });
</script>

</div>

    
    <!-- Mobile Header -->
    <div class="row show-for-small">
      <div class="small-12 show-for-small"><br>
      <img src="http://placehold.it/1000x600&amp;text=For%20Small%20Screens"></div>
    </div>
    <!-- End Mobile Header -->
</div>  


 
  
  <footer style="position: fixed; bottom: 10px; right: 10px" class="row hide-for-small">
        <ul class="inline-list right">
          <li>
          <a href="http://bit.ly/14JTSlb" target="new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/vimeo.png',1)">
          <img id="Image1" src="img/bw/vimeo.png" alt="Vimeo" title="Vimeo" width="50" height="50" id="Vimeo"></a>
            </li>
            <li>
    <a href="http://bit.ly/16JlVB7" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/youtube.png',1)">
    <img id="Image2" src="img/bw/youtube.png" width="50" height="50" title="Youtube" alt="Youtube"></a>
    </li>
    <li>
    <a href="http://on.fb.me/1a2mkjq" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img/facebook.png',1)">
    <img id="Image3" src="img/bw/facebook.png" width="50" height="50" title="Facebok" alt="Facebook"></a>
    </li>
    <li>
    <a href="http://bit.ly/1a2mozI" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','img/twitter.png',1)">
    <img id="Image4" src="img/bw/twitter.png" width="50" height="50" title="Twitter"alt="Twitter"></a>
    </li>
	<li>
    <a href="http://bit.ly/1a2mhUO" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','img/500px.png',1)">
    <img id="Image5" src="img/bw/500px.png" width="50" height="50" title="500px" alt="Vimeo"></a>
    </li>
    <li>
    <a href="mailto:[email protected]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','img/mail.png',1)">
    <img id="Image6" src="img/bw/mail.png" width="50" height="50" title="Email" alt="Email"></a>
    </li>
        </ul>
      </div>
</footer>

<footer> 
<div class="row show-for-small">
  <div class="large-12 columns">
    <hr>

    <div class="row">
      <div class="large-6 columns">
        <p>© Twenty One Media LLC</p>
      </div>

      <div class="large-6 columns">
        <ul class="inline-list right">
          <li>
            <a href="http://bit.ly/14JTSlb" target="_new"><img src="img/icons/vimeo.png" alt="Vimeo" title="Vimeo" width="16" height="16" id="Vimeo"></a>
            </li>
            <li>
    <a href="http://bit.ly/16JlVB7" target="_new"><img src="img/icons/youtube.png" width="16" height="16" title="Youtube" alt="Youtube"></a>
    </li>
	<li>
    <a href="http://bit.ly/1a2mhUO" target="_new"><img src="img/icons/500px.png" width="16" height="16" title="500px" alt="Vimeo"></a>
    </li>
    <li>
    <a href="http://on.fb.me/1a2mkjq" target="_new"><img src="img/icons/facebook.png" width="16" height="16" title="Facebok" alt="Facebook"></a>
    </li>
	<li>
    <a href="http://bit.ly/1a2mozI" target="_new"><img src="img/icons/twitter.png" width="16" height="16" title="Twitter"alt="Twitter"></a>
    </li>
	<li>
    <a href="mailto:[email protected]"><img src="img/icons/mail.png" width="16" height="16" title="Email" alt="Email"></a>
    </li>
        </ul>
      </div>
    </div>
  </div>
</footer>
	<script src="js/vendor/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="js/jquery.backgroundvideo.min.js"></script>
  	<script src="js/foundation.min.js"></script>
  	<script>
      $(document).foundation();
      var doc = document.documentElement;
      doc.setAttribute('data-useragent', navigator.userAgent);
    </script>
  </body>
</html>
            

         

small screenmobileVideohide-for-small

I'm working on the index page for my site and wanted to have two different appearances depending on the screen size and everything works but for some reason the hide-for-small class isn't affecting the video that isn't playing on small devices anyways so I end up with a black background.

you can see it for yourself here http://www.twentyonemedia.com/index_small.html

I've been over the code so many times now but just can't figure it out - help would be much appreciated.
Thanks

<div class="row ">
<div class="hide-for-small">

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="js/jquery.backgroundvideo.min.js"></script>
  
<script>
  $(document).ready(function() {
    var videobackground = new $.backgroundVideo($('body'), {
      "align": "centerXY",
      "width": 1280,
      "height": 720,
      "path": "video/",
      "filename": "splash720",
      "types": ["mp4","ogg","webm"]
    });
  });
</script>

</div>

    
    <!-- Mobile Header -->
    <div class="row show-for-small">
      <div class="small-12 show-for-small"><br>
      <img src="http://placehold.it/1000x600&amp;text=For%20Small%20Screens"></div>
    </div>
    <!-- End Mobile Header -->
</div>  


 
  
  <footer style="position: fixed; bottom: 10px; right: 10px" class="row hide-for-small">
        <ul class="inline-list right">
          <li>
          <a href="http://bit.ly/14JTSlb" target="new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/vimeo.png',1)">
          <img id="Image1" src="img/bw/vimeo.png" alt="Vimeo" title="Vimeo" width="50" height="50" id="Vimeo"></a>
            </li>
            <li>
    <a href="http://bit.ly/16JlVB7" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/youtube.png',1)">
    <img id="Image2" src="img/bw/youtube.png" width="50" height="50" title="Youtube" alt="Youtube"></a>
    </li>
    <li>
    <a href="http://on.fb.me/1a2mkjq" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img/facebook.png',1)">
    <img id="Image3" src="img/bw/facebook.png" width="50" height="50" title="Facebok" alt="Facebook"></a>
    </li>
    <li>
    <a href="http://bit.ly/1a2mozI" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','img/twitter.png',1)">
    <img id="Image4" src="img/bw/twitter.png" width="50" height="50" title="Twitter"alt="Twitter"></a>
    </li>
	<li>
    <a href="http://bit.ly/1a2mhUO" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','img/500px.png',1)">
    <img id="Image5" src="img/bw/500px.png" width="50" height="50" title="500px" alt="Vimeo"></a>
    </li>
    <li>
    <a href="mailto:[email protected]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','img/mail.png',1)">
    <img id="Image6" src="img/bw/mail.png" width="50" height="50" title="Email" alt="Email"></a>
    </li>
        </ul>
      </div>
</footer>

<footer> 
<div class="row show-for-small">
  <div class="large-12 columns">
    <hr>

    <div class="row">
      <div class="large-6 columns">
        <p>© Twenty One Media LLC</p>
      </div>

      <div class="large-6 columns">
        <ul class="inline-list right">
          <li>
            <a href="http://bit.ly/14JTSlb" target="_new"><img src="img/icons/vimeo.png" alt="Vimeo" title="Vimeo" width="16" height="16" id="Vimeo"></a>
            </li>
            <li>
    <a href="http://bit.ly/16JlVB7" target="_new"><img src="img/icons/youtube.png" width="16" height="16" title="Youtube" alt="Youtube"></a>
    </li>
	<li>
    <a href="http://bit.ly/1a2mhUO" target="_new"><img src="img/icons/500px.png" width="16" height="16" title="500px" alt="Vimeo"></a>
    </li>
    <li>
    <a href="http://on.fb.me/1a2mkjq" target="_new"><img src="img/icons/facebook.png" width="16" height="16" title="Facebok" alt="Facebook"></a>
    </li>
	<li>
    <a href="http://bit.ly/1a2mozI" target="_new"><img src="img/icons/twitter.png" width="16" height="16" title="Twitter"alt="Twitter"></a>
    </li>
	<li>
    <a href="mailto:[email protected]"><img src="img/icons/mail.png" width="16" height="16" title="Email" alt="Email"></a>
    </li>
        </ul>
      </div>
    </div>
  </div>
</footer>
	<script src="js/vendor/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="js/jquery.backgroundvideo.min.js"></script>
  	<script src="js/foundation.min.js"></script>
  	<script>
      $(document).foundation();
      var doc = document.documentElement;
      doc.setAttribute('data-useragent', navigator.userAgent);
    </script>
  </body>
</html>