How do I make an image's height responsive in a Bootstrap 4 column so that an embedded video in an adjacent column is not affected?

I need a row that contains an image, an embedded video, and some text. The site uses Bootstrap for responsive behavior, however, the objects in this row should not stack when the width of the page is reduced.

With an image in the first column the embedded video in the second column has problems resizing when the width of the page is reduced. It appears that as the page width decreases and the row height becomes less than the height of the image in the first column the embedded video in the second column begins to display black bars above and below and loses its aspect ratio. This occurs even though the image itself does seem to be changing height (thus being "responsive"). But the real problem I'm trying to address is the problem with the embedded video in the second column that gets messed up when the page width is reduced (with an image in the first column).

My code is as follows:

<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-3 border">
                <a href="https://placeholder.com"><img class="img-fluid" src="https://via.placeholder.com/30x225" alt="image"></a>
            </div>
            <div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
            </div>
            <div class="col-3 border d-flex">
                <span class="mt-auto">Some Text</span>
            </div>
        </div>
    </div>
</body>
</html>

The problem appears to center around the image in the first column. If I remove the image and place text in the column then the embedded video in the second column resizes properly at all window widths.

Although the "img-fluid" class added to the image in the first column appears to cause the image to have a responsive height the video in the second column gets messed up when the page width is shrunk. I've tried all sorts of height manipulations using percentages to both the image and the div/col containing the image, but so far I can't find a combination that addresses this issue.

Ultimately I would like to be able to specify a height for the image in the first column that is defined as a percentage of its container. I need the image to have a responsive height and the embedded video to scale but maintain its appearance (no black bars and correct aspect ratio) at all page widths.

BTW the image in the first column could be replaced with text that is rotated 90 degrees to the left. However, any attempt to rotate text within a Bootstrap column has caused a number of other alignment problems.

Solution

I found that if I use Bootstrap's embed-responsive class for the first column (containing the image) and wrap the image in a <div> then the embedded video in the second column behaves properly.

For some reason this doesn't work with the anchor around the placeholder image I used in the code in my question above. So I've provided my updated code below with a reference to a local image.

<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">  
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-3 embed-responsive border">
                <div class="embed-responsive-item justify-content-end d-flex ">
                    <img class="mt-auto" style="height: 100%;" src="img/local_image.jpg">
                </div>
            </div>
            <div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
            </div>
            <div class="col-3 border d-flex">
                <span class="mt-auto">Some Text</span>
            </div>
        </div>
    </div>
</body>
</html>