Problem: Responsive Video Embed
Problem description
Given a container element wrapping an <iframe> (e.g., a YouTube video), write CSS rules so the wrapper maintains a 16:9 aspect ratio and the video scales to fill the wrapper without overflow or distortion.
Goal
Implement CSS in styles.css so that .video-container enforces a 16:9 aspect ratio, and the nested <iframe> fills this container entirely.
Constraints
Do not modify the HTML structure.
Use only CSS (no JavaScript is allowed).
The video must maintain a 16:9 aspect ratio.
The
<iframe>should fully cover the container without cropping.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Responsive Video Embed
Problem description
Given a container element wrapping an <iframe> (e.g., a YouTube video), write CSS rules so the wrapper maintains a 16:9 aspect ratio and the video scales to fill the wrapper without overflow or distortion.
Goal
Implement CSS in styles.css so that .video-container enforces a 16:9 aspect ratio, and the nested <iframe> fills this container entirely.
Constraints
Do not modify the HTML structure.
Use only CSS (no JavaScript is allowed).
The video must maintain a 16:9 aspect ratio.
The
<iframe>should fully cover the container without cropping.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.