: 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

@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.

Vote Up Vote Down