I've tried adjusting the width and height and showing captioned of the ig embed, but neither seems to work.

This example has been used as a reference.

This case doesn't make any changes, but it fits the width of the viewport. But when I use it, no matter how I modify the window, it is displayed as a small width, and it cannot be displayed as a captioned.

width and height:

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/CGSnZSIHaiu/?utm_source=ig_embed&utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; min-width:326px; <<=======

I tried to modify the max-width and min-width..etc inside the blockquote, but it didn't work.

showing captioned

<blockquote class="instagram-media" data-instgrm-captioned <=======here data-instgrm-permalink="https://w....

Adding data-instgrm-captioned to the properties, it shows the captioned, but it didn't work in my case.

This embed needs to be added (<any>window).instgrm.Embeds.process(); to display successfully. I wonder if it has anything to do with the timing of the operation?

UPDATE:

I found out that the problem is with innerHTML (angular).

<div class="ig-container">
    <div [innerHTML]="html">
    </div>
</div>

If this is the case, ig will naturally extend:

<div class="ig-container"> <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://w.... </div>

I tried to set css to auto-extend without success:

<div class="ig-box" [innerHTML]="html">
    </div>

.ig-box {
  width: 1000px;
}