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.
Foundation is the most advanced responsive front-end framework in the world. Foundation is made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
Tweet us at @zurbfoundation
Get involved inour amazing community.
Keep up with the latest on Foundation. Find us on Github.
© 1998–2017 ZURB, Inc. All rights reserved.