drewsymo/Foundation — Issue #32: Video Player Wrappers
Author: Ethanhackett
Created: 2012-02-28 18:44:01+00:00
State: open

I was adding a video to the theme and the wrapping wasn't working. I looked in the foundations.css and it didn't have the video wrapper classes. I just copied them from the latest build of Foundation into the css right above the micro formats and it worked great.

/*	--------------------------------------------------
Video
Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
-------------------------------------------------- */

.flex-video {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}