Mobile app version of vmapp.org
Login or Join
Sent6035632

: Foundation: flex-video vs responsive-embed Please, explain to me what are the pitfalls to use ZURB Foundation's flex-video instead of responsive-embed (or vice versa). I've made a layout where I

@Sent6035632

Posted in: #ResponsiveWebdesign

Please, explain to me what are the pitfalls to use ZURB Foundation's flex-video instead of responsive-embed (or vice versa). I've made a layout where I don't see any difference between two:

<!-- .flex-video -->
<div class="small-12 columns">
<div class="flex-video">
<object data="example_youtube_url"></object>
</div>
</div>

<!-- .responsive-embed -->
<div class="small-12 columns">
<div class="responsive-embed">
<object data="example_youtube_url"></object>
</div>
</div>


They behave the same. What should I choose and why?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Sent6035632

1 Comments

Sorted by latest first Latest Oldest Best

 

@Hamaas447

Reading the documentation of .flex-video and .responsive-embed classes does not help to distinguish the difference between them. And testing them is not helpful either as we get, obviously, the same visual results.

This means one of the very objective ways -and maybe the only objective way- to answer your question is to check the code source of the corresponding classes, and this is what we can read:

.responsive-embed,
.flex-video {
position: relative;
height: 0;
margin-bottom: 1rem;
padding-bottom: 75%;
overflow: hidden; }


Farther, we can also check they affect, again, in the exact same way on the iframe, object, embed and video tags:

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


So the answer to your question is: for the purpose of what you are trying to achieve, there is absolutely no difference between the 2 choices.

P.S. A natural question may rise in our mind: why ZURB Foundation defined 2 names to do the same thing? I think we need to dig more in the documentation to guess the reason(s) behind this weird choice.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme