How to get YouTube thumbnail image aspect ratio to be 21:9 - sass

Question

<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet"/>
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--primary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter"><h3 style="color: black; text-align: center;">Be Part of It</h3>
<p style="color: black; text-align: center;">Choose an innovative degree that has been designed with your employability at its core.</p>
</div>
</div>
</div>
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div></a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I've got a modal on my site, and use the following to display a thumbnail image:
http://img.youtube.com/vi/DxwrdB7A6-I/maxresdefault.jpg
The problem is the video has an aspect ratio of 21:9. I've used the following styles, but still get the black letterbox on both the top and bottom of the image. Is there a way to just display the YouTube thumbnail without the black letterbox?
&__container {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
margin-bottom: 1rem;
a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

Answer 1

I've modified your sample code to add two new CSS rules to correspond to a class your HTML already had with no styles:
.m-modal-video__container--cinemascope defines the container around your cinemascope-ratio image, using the padding-bottom trick you'd previously tried implementing.
.m-modal-video__container--cinemascope img defines the sizing and positioning of the image inside the above container. Knowing you want this image to maintain its aspect ratio and not stretch, I've removed the height: 100% rule (so the height is automatically calculated) and vertically centered the image with the top: 50% and transform: translateY(-50%) trick.
This is all needed because YouTube still produced a 16:9 JPG thumbnail for your video despite its 21:9 ratio, so we're essentially using this trick to hide the black bars in the image. I still see a tiny sliver poking through, but you slightly adjust your padding-bottom ratio if you were worried about that, or increase your img's width past 100%.
.m-modal-video__container--cinemascope {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
}
.m-modal-video__container--cinemascope img {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet" />
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div>
</a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>