Adjusting Youtube Display Width/Height Depending on DIV Width

Question

Youtube iframe needs to be scaled depending on the div container width. The width varies depending on the page snippet layout.

The Youtube video aspect ratio is 560/315, width/height.

In what I tried (see below), the Youtube iframe height is too short and crops the thumbnail.

ACTUALLY, it's the thumbnail that is cropped. If you play the video, the apsect ratio adjusts…

BUT the video is too narrow (tiny) because it shows with the height of the iframe container which is way too short.

This happens on Firefox and Chrome latest browsers.

How can I get the display to adjust the video to the correct aspect ratio within the container div?

See https://codepen.io/iamalta/pen/MMwwwK

Video here: https://www.youtube.com/watch?v=UDV161pAcUU

HTML CODE:

<div class="col-12">
   <div class="left col-6">
       <iframe class="left youtube" src="https://www.youtube.com/embed/UDV161pAcUU" frameborder="0"
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
       </iframe>
   </div>

   <div class="left col-6">
       <div class="p1">
           This Tropical Water Lily Preview Video shows Tricker's and the wonderful world of Tropical Water
           Lilies. Some scenes are from our DVD Introduction to Water Gardening. Purchase entire DVD.
       </div>
       <div class="clearfix"></div>

       <div class="col-12 p0">
           <img src="https://www.tricker.com/media/ecom/description/redtropicalheading1.jpg" class="img-100-auto" />
       </div>
   </div>
</div>

CSS

.youtube{
  width: 560px;
  height: 315px;
  max-width: 100%;
  height: 56.25%;
}
.img-100-auto{width:100%;height:auto}
.clearfix:after, .clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
.col-6{width:50%}
.col-12{width:100}
.left{float:left}
.p1{padding:rem}
.center{text-align:center}

Thank you in advance for your suggestions and hopefully an answer that works!

Answer 1

I went to the website; however, this did not work for me because I needed it smaller on desktop view. Here is what I did to meet my needs. If this helps someone else, great.

Change the size of the video within the iframe.

<div class="flex-video">
<iframe class="video" width="640" height="360" src="AddYourSource" title="Add Your Title" frameborder="0" allowfullscreen></iframe>
</div>

/*VIDEO*/
.flex-video{
width:100%;
position: relative;
margin:0 auto 20px auto;
text-align:center}

/*VIDEO MOBILE*/@media(max-width:768px){
.flex-video{
height: 0;
padding-bottom: 56.25%}
.flex-video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%}}

Answer 2

I noticed there was a type on the css for .youtube.

It had two heights.

If I remove that, the height will be too tall.

This also doesn't work:

.youtube{width: 1120px;height:56.25%;max-width:100%;}

---

I found it! Thanks for your help. I worked all day on this and appreciate your suggestion.

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

Answer 3

What if instead of percentages you used vw and a calculate the height to be the width divided by the aspect ratio. You may have to tweak the width to make it fit a little better because of the padding of each div.

So this:

.youtube{
  width: 50vw;
  height: calc(50vw/1.77);
}