3

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?

Improve this question
3
  • I was about to vote to close for soliciting an opinion or for being too broad. However, this could also solicit some interesting answers. So I hesitated and am now hoping for a good solid answer. Cheers!!
    – closetnoc
    Commented Sep 16, 2017 at 5:27
  • I was aware of closing such a question but asked anyway. There are no docs or info on this, there should be dev's experience. That's why.
    – Max Yudin
    Commented Sep 16, 2017 at 5:41
  • 1
    Let's hope there is somewhat out there who can answer this for you. It is slow here on the weekends, however, fairly active during the week starting Sunday evening.
    – closetnoc
    Commented Sep 16, 2017 at 5:52

1 Answer 1

Reset to default
4

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.

Improve this answer
2
  • Your CSS got me to think forward. Thanks for getting me off the "handbrake". I was tired with no normal sleep for some days.
    – Max Yudin
    Commented Sep 17, 2017 at 10:54
  • And yes, we get, obviously, the same visual results. I'm afraid of continuity of maintenance.
    – Max Yudin
    Commented Sep 17, 2017 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.