CODEWITHSUNDEEP
youtubezurb-foundation
Rebecca Goldstien
Rebecca Goldstien

Reputation: 1

zurb foundation youtube embed

Has anyone experienced any trouble embedding youtube videos into the Foundation 5 large-3 columns class?

  <div class="large-3 columns">

  <p>
    <a href="" data-reveal-id="mapModal"><img src="http://example.com/large.png?111"></a><br />

  </p>
</div>

This class css is as follows:

media="all"
@media only screen and (min-width: 64.063em)
.large-3 {
position: relative;
width: 25%;
}

I used the same for a youtube embed, and it distorted it terribly. Any suggestions?

Upvotes: 0

Views: 600

Answers (2)

JAMESSTONEco
JAMESSTONEco

Reputation: 2051

There is a special component in ZURB Foundation called flex-video that you can use to create responsive YouTube (and Vimeo) embeds. Here is an example:

<div class="flex-video widescreen">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/LyszBoO_r7Y" frameborder="0" allowfullscreen></iframe>
</div>

You can also use a Vimeo video embed by adding the .vimeo class. These are also avaialble via the Sass Mixins and can be applied to any existing class or element in CSS by using @include flex-video-container();

NOTE: this also works for the latest version, ZURB Foundation for Sites v6.

Upvotes: 3

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

YouTube videos require special handling to become responsive but there's a solution! Use FitVids.js: https://github.com/davatron5000/FitVids.js

Upvotes: 0

Related Questions