YouTube Thumbnail Responsive Cropped Image

Crop the black bars off of a YouTube thumbnail image. The result is a 16:9 cropped image that will scale responsively in your responsive web design layout.

HTML

<div class="ytImgContainer">
    <a href="https://www.youtube.com/watch?v=yZuWQTXZBHI&amp;width=640&amp;height=480">
        <div class="ytImgWrapper">
            <div class="ytImgThumbBox">
                <img src="http://img.youtube.com/vi/yZuWQTXZBHI/sddefault.jpg?embed=true" class="ytImgThumbImg" alt="text">
                <div class="ytImgThumbPlay">
                    <img src="http://promincproductions.com/blog/wp-content/uploads/2016/07/video_play.png" class="ytImgThumbPlayButton">
                </div>
            </div>
        </div>
    </a>
</div>

CSS

.ytImgContainer img {
    max-width: 100%;
    height: auto;
}

.ytImgContainer {
    margin: 0 auto;
    max-width: 604px;
    width: 100%;
}

.ytImgContainer:after {
    clear: both;
}

.ytImgContainer:before,
.ytImgContainer:after {
    content: "";
    display: table;
}

div.ytImgThumbBox{
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

div.ytImgThumbPlay{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width:48px !important;
    height:48px !important;
    margin: -24px 0 0 -24px !important;
}

img.ytImgThumbImg{
    width: 100% !important;
    height: 100% !important;
    margin: -9.5% 0px -12%;
}