Looking to have something like this:
There's a short video clip being played in the background of the main header/intro area.
How would I achieve this using Foundation?
Thursday, December 03, 2015 at 10:17 AM EST
The video seems like it just opens full screen after the button is clicked.
You can do this in a modal that is set to height: 100vh; and width: 100%;
There is also a full screen api on Youtube and Vimeo embeds.
I can add to this. In order to have the video clip play in the background you can use html5 video tags and some css.
Here is a quick tutorial on how to achieve this:
We have a similar thing on the http://zurb.com homepage, however what is different is we have the video file hosted instead of displaying a youtube or vimeo fullscreen modal, and we are using some JS. One thing to keep in mind if you want a quick page load, or as quick as possible, you will need to lower the quality of the shorter rendered clip a bit. You will notice that a lot of sites have a color overlay or blur to the video so that the lowered quality isn't noticeable.
Your HTML might look something like this with a little Foundation 5 code:
<div class="large-8 columns large-centered text-center">
<h2>My Amazing Title Lives Here!</h2>
<p>Right over the video :D</p>
<video autoplay loop poster="backup.jpg" id="bgvid">
<source src="/path/to/video.webm" type="video/webm">
<source src="/path/to/video.mp4" type="video/mp4">
You can use a service like BrowsePlay to host your background video.
Their embed works inline and auto plays on mobile just like desktop
Create an Account
Get up to speed FAST, learn straight from the experts who built Foundation.
Stay informed with amazing responsive trends each month from ZURB.
Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.
Or if you prefer, contact the Foundation Team at firstname.lastname@example.org or (408) 341-0600 x635