Menu icon Foundation

Developer | Orlando, FL

I design and develop visuals for the web.

My Posts


My Comments

Mario Giancini commented on Vocal Son's post over 2 years

I prefer to use flex grid whenever possible as it affords you the most options and is easiest to implement complicated layouts.
 
I would also try using an expanded row for the header to make it full width by adding the "expanded" class to the row div. Then use normal rows for your grid layouts.
http://foundation.zurb.com/sites/docs/grid.html#fluid-row

Mario Giancini commented on Mario Giancini's post over 3 years

@Rafi Benkual I'll definitely look into helping after Christmas.

Mario Giancini commented on Vocal Son's post over 3 years

@Vocal Son I'm looking at your indexvideo.html file and viewing it in the browser. It comes up full screen just fine. You need to add the title overlay in the fullscreen-bg div you have, and make sure you use the built in row align-center align-middle classes for the title container shown above.

Mario Giancini commented on Vocal Son's post over 3 years

@Vocal Son it looks like you may have added the video container to row or column class. The video container needs to be full width, preferably right in the body. Can you post the full page code?

Mario Giancini commented on Vocal Son's post over 3 years

Hey there. As Brandon Stated Foundation doesn't have video background functionality built in, but you can utilize Flex Gird to easily create a full width and height video background that has text and html content centered in the middle.

Here's what you do.

Make sure you have flex grid enabled in your app.scss file and disable the normal grid.

@include foundation-global-styles;
// @include foundation-grid;
@include foundation-flex-grid;

Next, for your video background section you'll want to contain the video itself and the content area overlay in a div and give it a class. Inside that div you'll place the video as well as the message overlay.

<div class="promo">
  <video autoplay loop muted poster="/assets/img/video-path.jpg" id="video_bg">
  <source src="/assets/img/video-path.webm" type="video/webm">
  <source src="/assets/img/video-path.mp4" type="video/mp4">
  </video>
  <div class="row align-center align-middle">
    <div class="small-8 column text-center" id="message">
      <h1>Title Goes Here</h1>
      <h2>Subtitle goes here.</h2>
    </div>
  </div>
</div>

Finally, add these styles for the video background to one of your SCSS components

.promo {
  position: relative;
  overflow: hidden;

  #video_bg {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
  }

  .row {
    min-height: 100vh;
  }

  #message {
    color: #fff;
    text-transform: uppercase;
    z-index: 1;
  }
}

We're using a lot of Foundation's built in goodness to get the desired styles and alignment. Change the row min-height if you don't want it to be 100% of the viewport, and adjust the message styles as needed.

Posts Followed



Following

Followers

My Posts

My Comments

You commented on Vocal Son's post over 2 years

I prefer to use flex grid whenever possible as it affords you the most options and is easiest to implement complicated layouts.
 
I would also try using an expanded row for the header to make it full width by adding the "expanded" class to the row div. Then use normal rows for your grid layouts.
http://foundation.zurb.com/sites/docs/grid.html#fluid-row

You commented on Mario Giancini's post over 3 years

@Rafi Benkual I'll definitely look into helping after Christmas.

You commented on Vocal Son's post over 3 years

@Vocal Son I'm looking at your indexvideo.html file and viewing it in the browser. It comes up full screen just fine. You need to add the title overlay in the fullscreen-bg div you have, and make sure you use the built in row align-center align-middle classes for the title container shown above.

You commented on Vocal Son's post over 3 years

@Vocal Son it looks like you may have added the video container to row or column class. The video container needs to be full width, preferably right in the body. Can you post the full page code?

You commented on Vocal Son's post over 3 years

Hey there. As Brandon Stated Foundation doesn't have video background functionality built in, but you can utilize Flex Gird to easily create a full width and height video background that has text and html content centered in the middle.

Here's what you do.

Make sure you have flex grid enabled in your app.scss file and disable the normal grid.

@include foundation-global-styles;
// @include foundation-grid;
@include foundation-flex-grid;

Next, for your video background section you'll want to contain the video itself and the content area overlay in a div and give it a class. Inside that div you'll place the video as well as the message overlay.

<div class="promo">
  <video autoplay loop muted poster="/assets/img/video-path.jpg" id="video_bg">
  <source src="/assets/img/video-path.webm" type="video/webm">
  <source src="/assets/img/video-path.mp4" type="video/mp4">
  </video>
  <div class="row align-center align-middle">
    <div class="small-8 column text-center" id="message">
      <h1>Title Goes Here</h1>
      <h2>Subtitle goes here.</h2>
    </div>
  </div>
</div>

Finally, add these styles for the video background to one of your SCSS components

.promo {
  position: relative;
  overflow: hidden;

  #video_bg {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
  }

  .row {
    min-height: 100vh;
  }

  #message {
    color: #fff;
    text-transform: uppercase;
    z-index: 1;
  }
}

We're using a lot of Foundation's built in goodness to get the desired styles and alignment. Change the row min-height if you don't want it to be 100% of the viewport, and adjust the message styles as needed.

Posts Followed

Following

Followers

  • No Content