Tag: YouTube

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.

css.php