I'm using youtube-player api for a project in Angular, the problem is that the videos are widther than the parent div, I have to set the width and height in the options to make it display corectly in the div but when I see the page from a bigger or smaller screen, the video is getting smaller or bigger than the div, for example if I see the page from my cellphone, the videos are bigger than the div, I'm using Bootsrap 5 for the horizontal cards, so I set the videos to display in a col-4 while the card body is display in a col-8.This is how it looks from my monitor
This is hot it look in an Ipad Air
And this is hot it looks in a cellphone
As you can see the videos are showing correctly in my monitor but with different widths the videos are smaller or bigger, here is my code:
HTML
<div class="col-lg-11" *ngFor="let video of videos | slice:1:5"><div class="card h-100" ><div class="row h-100"><div class="col-4 col-lg-4 pe-0"><youtube-player class="rounded-start d-flex" videoId= {{video.videoId}} suggestedQuality="default" [height]="105" [width]="160" ></youtube-player></div><div class="col-8 col-lg-8"><div class="card-body pe-0 pe-lg-auto"><h4 class="card-title">{{video.titulo}}</h4><p class="card-text"><small class="text-muted">{{video.descripcion}}</small></p></div></div></div></div></div>What can I do to make the videos display correctly?Here is a live example in stackblitzhttps://stackblitz.com/edit/angular12-bootstrap-3macyu?file=src/app/app.component.html