zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 216 forks source link

Video Tag inside zf-interchange #696

Open bneigher opened 8 years ago

bneigher commented 8 years ago

Has anyone else tried this yet? Not only does it look like the videos are fetched regardless of the screen size, but it crashes my android chrome if I have too many videos loading (large videos ~20mb each). Only crashes when using zf-interchange. When I just use the video tag in lieu of the below block it works fine.

<zf-interchange>
   <span media="small" class="block-grid vertical billboard-video">
      <div class="for-mobile" style="background:url(my-image.jpg) no-repeat; background-size:cover;"></div>
   </span>
   <span media="medium">
      <video class="billboard-video" preload autoplay loop muted poster="my-image.jpg">
         <source src="my-video.m4v" type="video/mp4">
         <source src="my-video.webm" type="video/webm">
         <source src="my-video.ogv" type="video/ogg">
            Your browser does not support the video tag.
      </video>
   </span>
</zf-interchange>

I'de prefer not to put the contents of each breakpoint in a separate file