CSS overlap issue with flickr embeds

[dieseltravis]

See screenshot:

Incoming link:
https://mltshp.com/incoming/before/1BQQ8

[spaceninja]

Looks like our logic that tries to force embedded iframes to 16:9 isn't working for flickr for some reason.

[bradchoate]

Not all videos are 16:9?

The markup for this Flickr video:

<div class="image-content">
    <div class="the-image">
        <div class="data-wrapper">
            <iframe frameborder="0" allowfullscreen=""
                class="flickr-embed-frame"
                webkitallowfullscreen="" mozallowfullscreen=""
                oallowfullscreen="" msallowfullscreen=""
                width="450" height="800"
                data-natural-width="450" data-natural-height="800"
                style="overflow: hidden; padding: 0px; margin: 0px; width: 450px; height: 800px; max-width: 100%;"
                data-loaded="true"></iframe>
            <script async="" src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
        </div>
    </div>
    <div id="image-content-footer-1BQQ6" class="image-content-footer">
        <!-- ... -->
        <div class="clear"> </div>
    </div>
</div>

[onezerodigits]

A more bulletproof solution might include measuring the embed dimensions, like how fitvids does:
https://github.com/davatron5000/FitVids.js/blob/master/jquery.fitvids.js

Thanks for giving this attention!

[ardgedee]

This should be fixable entirely in CSS, without having to process loading content.

The culprit has two parts. Commenting both of the following assignments fixes the problem on the example page, although a committed fix should be more thorough than this:
in admin.scss:136, .data-wrapper>iframe is assigned absolute position.
in core.scss:8, .data-wrapper is given a padding-top value of 56.25%.