Add responsive embed class with ratio by variable

Created by: thenewguy

It would be handy if there was support for a variable ratio.

For example,

<style>
    .embed-responsive-by-ratio::before {
        padding-top: 56.25%; /* 16:9 fallback when var() not supported */
        padding-top: var(--embed-responsive-by-ratio);
    }
</style>

<div class="embed-responsive embed-responsive-by-ratio" style="--embed-responsive-by-ratio: 17.8%;"></div>

When templating a known width and height it is simpler to calculate the padding than determine which of your classes is a closer fit.

Didn't see this in the documentation but it is pretty simple and working for me - would probably be generally useful