Revision history [back]

To create a responsive iframe with a video embedded in it, you can follow these steps:

1. First, create an HTML file and add the following code for the video iframe:

<div class="video-container">
  <iframe src="your-video-source-url" frameborder="0" allowfullscreen></iframe>
</div>

1. Next, you'll need to add some CSS to make the iframe responsive. Here's an example:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

1. Finally, replace "your-video-source-url" with the actual URL of your video, and adjust the iframe dimensions or the padding-bottom value to match the aspect ratio of your video. For example, if your video has a 16:9 aspect ratio, set the padding-bottom to 56.25% (9 divided by 16 times 100).

That's it! Your video iframe should now be responsive and fit any screen size.