This is the html and tailwind I'm using in Angular 12.
<div class="grid gap-5 grid-cols-1 lg:grid-cols-3 justify-items-center"><div *ngFor="let v of featuredVideos" class="rounded-2xl overflow-hidden" style="height: 220px"><youtube-player [videoId]="v.videoId" suggestedQuality="highres" [height]="220" [width]="350"></youtube-player></div></div>And I have this in the Typescript file:
featuredVideos = [ { name: 'rxjsVideo', videoId: 'DAGrVyKR_P4' }, { name: 'tipsVideo', videoId: 'JINJQk7ggoo' }, { name: 'angMaterialVideo', videoId: 'gSvxYv2VgHc' } ];The videos are responsive when small, but in medium they overlap each other. Is there a way to condense their ratios when the screen gets slightly smaller so they stay in their own cell?