CODEWITHSUNDEEP
cssiframeaspect-ratio
Aditya Kumar
Aditya Kumar

Reputation: 173

How to convert a iframe video into aspect ratio of 16by9

I have existing code for video embedded as iframe. I want to convert this video into aspect ratio of 16:9. I cannot change the css applied to class .parent1. Any help how it is possible through CSS?

.parent1 {
  position: absolute;
  left: 37%;
  top: 14%;
}
<div class="parent1">
  <div class="parent2">
    <iframe width="560" height="280" src="https://www.youtube-nocookie.com/embed/-UD4yHnEMeM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

Upvotes: 0

Views: 172

Answers (1)

denns
denns

Reputation: 1131

Here is a simple rip-off of bootstraps responsive embed:

https://codepen.io/denns/pen/NLYWQJ?editors=0100

the main thing is:

.parent {
    position: relative;
    display: block;
    width: 500px;  // you will most like use 100% to fit into its parent
    padding: 0;      
}

.parent::before {
    content: '';
    display:block;
    padding: 56.25% 0 0 0;
}

.parent iframe {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Here it is in action at bootstraps own site: https://getbootstrap.com/docs/4.1/utilities/embed/

Upvotes: 1

Related Questions