Menu icon Foundation
How to add video as background header?

Looking to have something like this:

http://www.invisionapp.com/

There's a short video clip being played in the background of the main header/intro area.

How would I achieve this using Foundation?

Foundation

Looking to have something like this:

http://www.invisionapp.com/

There's a short video clip being played in the background of the main header/intro area.

How would I achieve this using Foundation?

Rafi Benkual over 1 year ago

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.

https://developer.vimeo.com/player/embedding

Arthur de la Rocha over 1 year ago

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:

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

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="my-header-section>

  <div class="row">
    <div class="large-8 columns large-centered text-center">
      <h2>My Amazing Title Lives Here!</h2>
      <p>Right over the video :D</p>

      <a href="#">Play</a>
    </div>
  </div>

  <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">
  </video>

</div>

You can just link the Play button to open a modal as Rafi suggested, or if you know some Javascript, you can trigger an event to replace the background video with the full video and hide the text. :D I hope this helps!

Josh Duncan 3 months ago

You can use a service like BrowsePlay to host your background video.

 

Their embed works inline and auto plays on mobile just like desktop

 

http://browseplay.com