https://i.sstatic.net/R0GUn.jpgI have successfully created a responsive video, but there seems to be an issue with the width to height ratio when the browser is fully stretched. The iframe appears narrow and tall in this situation. However, when the browser is resized and the video moves below the text, the ratio corrects itself. How can I ensure that the ratio remains consistent in the stretched browser? Here is the code I am using:
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
<section class="section1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 section1Text">
<h2 class="text-center">What We Have to Offer</h2>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p>
</div>
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bsY2GdBEvSA?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</section>