Ask Your Question
0

How can I create an iframe that is responsive, with a video embedded in it?

asked 2022-09-23 11:00:00 +0000

scrum gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2021-06-13 06:00:00 +0000

djk gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2022-09-23 11:00:00 +0000

Seen: 18 times

Last updated: Jun 13 '21