Issue
I would like for the iframe within the Angular Material dialog content to be:
- maximum size of 560x315px
- responsive size depending on the parent dialog container. if the container gets smaller than the maximum width
- keep aspect ratio.
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>
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.
Solution
How about use the max-width in your css( IFrameDialogComponent.scss) like this:
max-width: 100%;
max-height: 100%;