@include intrinsic(16/9);

![Bower]()

A simple mixin for easy intrinsic ratios.

$3

Intrinsic ratios are pretty sweet for making certain content responsive.
They're also pretty sweet for helping to mitigate page reflow (something visitors really hate).

A lot of people use stuff like FitVids.js to help make YouTube videos and such responsive, but
it seems pretty heavy-handed to use a JS lib for a simple CSS technique. It also obfuscates what's going on and people tend to just throw it in their
stack whenever they are embedding a YouTube video.

This approach combines Dave Rupert's (FitVids' author) mixin approach with
Matthijs Kuiper's &::before approach and sprinkles in the ability
to feed it your own ratios for various content and background-color while said content is loading.

$3

Use it on embedded videos, maps, and pretty much anywhere you have an element with a standardized size (thumbnails, hero images, etc.) to help prevent
page reflow.

$3

- bower install intrinsic
- @import 'bower_components/intrinsic/intrinsic';

$3

CodePen Demo

Be sure to throttle your connection ("Regular 2G" is good) to see how how it looks in low-bandwidth settings.

``scss
.youtube {
@include intrinsic(); // defaults to 16/9
}

.bg-cover {
@include intrinsic(2/1);

background: lighten(dodgerblue, 25%) url(https://www.fillmurray.com/1600/900) center no-repeat;
background-size: cover;
}
`

`html



`

$3

- $ratio - The width/height ratio (preferably without units, see below). Defaults to 16/9.
- $bg - The background color. Defaults to darken(white, 5%). You need to manually add this to your background property if you use the background cover technique (see the example code).

Note: You can use fixed numbers but they'll get stripped. intrinsic(1600px/900px) turns into 1600/900. This is because we can't divide numbers with units (not even with calc`).