How can I adjust the height of a Vimeo or YouTube video to match the height of the container?

Question

This is my code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: flex;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 90vh;
  background-color: yellow;
  overflow: hidden;
}

.scrollable-area {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.gallery-items {
  display: flex;
  min-width: 100%;
  height: 100%;
}

.gallery-item {
  flex: 0 0 auto;
  height: 100%;
  object-fit: contain;
  display: flex;
  padding: 10px;
}

.gallery-item img {
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-item iframe {
  width: calc((16 / 9) * 90vh - 40px);
  background-color: red;
}

<div class="gallery-container">
  <div class="scrollable-area">
    <div class="gallery-items">
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Sky_landscape.jpg">
      </div>
      <div class="gallery-item">
        <iframe src="https://player.vimeo.com/video/584985260" frameborder="0" allow="fullscreen"></iframe>
      </div>
      <div class="gallery-item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast%2C_Dhaka%2C_Bangladesh.JPG">
      </div>
    </div>
  </div>
</div>

There is a Vimeo video included, and I'm trying to calculate the width correctly so that it fits into the horizontal gallery. It seems a bit complicated to me in this way, and if I want to use vertically oriented videos or videos with another ratio for new items, the calculation is no longer correct. What is the best way to fix that?