Tag: responsive

Responsive YouTube embeds

  1. Embed YouTube video in an iframe.
  2. Place the iframe in a container div.
  3. Give the iframe position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  4. The container gets position: relative; and its ::before pseudo-element is: content: ""; display: block; padding-bottom: n% where n is the ratio of height to width multiplied by 100. So a 16:9 video should be given a bottom padding of 9 / 16 * 100, or 56.25%.

This solution was provided by Thomas Wilburn in the News Nerdery Slack, and it can be coded auto-magically for you here.

Intrinsic Web Design

Jen Simmons just ushered in this new name for the way(s) web design is changing. She has been adding great videos on her YouTube channel, Layout Land, for about the past two months. She gave this presentation at An Event Apart in Seattle yesterday. There are notes on what she said here and here.

Oh, yeah, her talk is titled “Everything You Know About Web Design Just Changed.”

Now we can use white space in web design, for real.

We can squish, or shrink, or stretch. Deliberately.

Even media queries are changing. This is beyond responsive design, which has been our paradigm for eight years (!) already.

See Simmons’s cool examples of grid and more.

Also this great video series of how to write CSS that works in every browser.

css.php