[Fixed] Responsive Iframe within Angular Material dialog content


I would like for the iframe within the Angular Material dialog content to be:

  1. maximum size of 560x315px
  2. responsive size depending on the parent dialog container. if the container gets smaller than the maximum width
  3. keep aspect ratio.


openIFrameDialog(): void {


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

I also added this in IFrameDialogComponent.scss:

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

but no luck, it expands on the entire screen not on the parent container

Any suggestions on how to achieve the above requests?

I would really appreciate it.


How about use the max-width in your css( IFrameDialogComponent.scss) like this:
max-width: 100%;
max-height: 100%;

Leave a Reply

(*) Required, Your email will not be published