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!