: 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
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?
More posts by @Sent6035632
1 Comments
Sorted by latest first Latest Oldest Best
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.