angular innerHTML set Instagram embed width, height and show captioned

Question

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;
}