- Embed YouTube video in an iframe.
- Place the iframe in a container div.
- Give the iframe
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
- The container gets
position: relative;
and its::before
pseudo-element is:content: ""; display: block; padding-bottom: n%
wheren
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.