Shrink a YouTube video responsively

[asasass]

Have you tried using object-fit: cover; and did it do anything?

And if it did how would it be used on a video?

[PaulOB]

@asasass

and did it do anything?

No it didn’t seem to do anything.

Have you tried the background trick I mentioned for the iframe?

[asasass]

I came up with this:
https://jsfiddle.net/ra321xkd/

.frame {
  max-width: 640px;
  margin: auto;
  border: 15px solid transparent;
  border-radius: 12px;
  background: #333;
  background: 
  background-origin: 
  background-clip: 
  box-shadow: 
}

.frame-inner {
 position: relative;
 width: 100%;
 height: 0;
 padding-top: 56.25%;
 overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="outer">
  <div class="tcell">

    <div class="frame">
      <div class="frame-inner">
        <div class="video video-frame"></div>
      </div>

    </div>
  </div>
</div>

[asasass]

This one is using:
aspect-ratio: 16 / 9;

I think I did it right.
https://jsfiddle.net/go5qpx3u/

.frame {
  position: relative;
  max-width: 640px;
  margin: auto;
  border: 15px solid transparent;
  border-radius: 12px;
  background: #333;
  background: linear-gradient
  background-origin: 
  background-clip: 
  box-shadow: 
}

.frame-inner {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: transparent;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="outer">
  <div class="tcell">

    <div class="frame">
      <div class="frame-inner">
        <div class="video video-frame"></div>
      </div>

    </div>
  </div>
</div>