O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Flex video

The flex video component is a slick little helper when you want to embed a video in your website. When you embed a YouTube video in a column without the flex video component, it isn't well contained by default and will spread out under the column beside it. Flex video packages it into the available space quite nicely.

It supports YouTube, Vimeo, and other streaming sites that use iFrame, embed, or object elements.

To use the flex video component, just create a <div> element with the flex-video class. Assuming you are putting this inside a column, you need to create a new <div> element inside that column. It doesn't work properly if you add the flex-video class to a column div.

The default video size will be a traditional 4:3 ratio. You ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required