Created by: ntkme
This PR fixes a Firefox only problem that .responsive-embed will display incorrectly in a flex container, which causes embed items to disappear or overflow.
<div style="display: flex;">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/nzwFJcDhmdA" frameborder="0" allowfullscreen></iframe>
</div>
</div>Firefox ignores vertical percentage padding when the flex container lacks an explicit height. In this issue, Firefox developer says it is not a bug in Firefox. He claims that the implementation in all other major browsers is wrong.
For blocks in CSS, % padding values are always resolved against the containing block width -- but in flexbox, they're resolved against the length of the containing block's corresponding dimension (width or height). Spec reference: http://dev.w3.org/csswg/css-flexbox/#item-margins
An extra benefit from this PR is that user can now set an explicit width on embed-responsive without screwing the aspect ratio. Under the current implementation, it would require another wrapper to do so.