Responsive Videos

When we embed videos from services like YouTube and Vimeo, the videos come inside an iframe and are usually not responsive. The width of the video is confined to the width of the container, but the height never changes causing it to be very tall and not so wide.
We can make our embedded videos responsive by wrapping them in an HTML element, like this:

Then, we need to add this CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Learn how to add CSS here.
Doing this will make our embedded videos 100% responsive.