Responsive Iframe в содержимом диалога Angular Material

Question

Мне бы хотелось, чтобы iframe в содержимом диалога Angular Material был:

1. максимальный размер 560x315px
2. адаптивный размер в зависимости от родительского контейнера диалога.если контейнер становится меньше максимальной ширины
3. , сохраняйте соотношение сторон.

SourceComponent.ts :

openIFrameDialog(): void {
  this.dialog.open(IFrameDialogComponent);
}

IFrameDialogComponent.html:

<div mat-dialog-title class="close">
  <button mat-icon-button (click)="onClose()" tabindex="-1">
    <mat-icon>close</mat-icon>
  </button>
</div>
<mat-dialog-content>
    <iframe width="560" height="315" src="[yt_video_url]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</mat-dialog-content>

Я также добавил это в IFrameDialogComponent.scss:

mat-dialog-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

, но, к счастью, он расширяется на весь экранне в родительском контейнере

Есть предложения по выполнению вышеуказанных запросов?

Буду очень признателен.

Answer 1

Как насчет использования максимальной ширины в вашем CSS (IFrameDialogComponent.scss) следующим образом: max-width: 100%; max-height: 100%;