MoreLesson 221Free preview

Responsive Iframes

This lesson is part of How To · All levels

Summary

A responsive frame is a video or map embed that is width-adjusting the screen without compromising the ratio. Since the iframe has inherently fixed dimensions, it needs to be wrapped in a container that regulates aspect ratios. Classical techniques use padding-bottom percentages, whereas modern approaches use rather aspect-ratio properties.

Key points

Pack the iframe with a container that regulates the width and aspect ratio
Old trick: padding-bottom 56.25% to the 16:9 ratio
The frames inside the wrapper are positioned absolute with a width and height of 100%
Always include the title attribute on the iframe for accessibility

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.