Image and video as responsive elements with same proportions

user_3044737 0
Viewed 82

I want to place an image and a video face to face, with the same dimensions. The image is 16:9 aspect ratio, so the iframe video should be the same. And both elements should be responsive.

How can I do that?
Here is my try, without success:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt {
  display: inline-block;
  width: 45%;
}

.imgt {
  display: inline-block;
  width: 45%;
}

.framewrap {
  display: inline-block;
  width: 45%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: gold;
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
}
<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

iframe css html
2 Answers

The current issue seems to be that the padding-bottom on .framewrap is calculated from the width of the containing block. Since .framewrap also has width:45%, the proportions are not what you intend.

The padding-bottom would need to be 45% of 56.25%, like this:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt,
.framewrap {
  display: inline-block;
  width: 45%;
}

.framewrap {
  position: relative;
  background: gold;
  overflow: hidden;
  height: 0;
  padding-bottom: calc(56.25% * .45);
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

However, I suggest using a pseudo-element of .framewrap to set the bottom padding, as that value will be calculated from the width of .framewrap.

Here's a demonstration:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt,
.framewrap {
  display: inline-block;
  width: 45%;
}

.framewrap {
  position: relative;
  background: gold;
  overflow: hidden;
}

.framewrap::before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

user_9242990

Try this:

HTML

  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788- 
   large.jpeg' alt='img'>

  <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
  picture-in-picture" allowfullscreen></iframe>

CSS

.imgt, .iframetop {
  display: inline-block;
  width: 45%;
  height: 200px; // add height according to your need
}

codepen working demo

user_116904430
Related