Change innerHTML CSS style of iframes and images

问题:

I have an Angular 6 app and I'm getting a blog entry from a HTTP call and I set one of the variables which is the content to the innerHTML of a span resulting in the blog content being displayed. It's also got images and iframes, and they do have style in there because they are defined in the editor. The problem I have is that the CSS I have to override the iframe values is not applied and I cannot get the desired result.

I have defined in my component.scss the following:

iframe {
width: 100% !important;
}

That CSS cannot be found in the list of CSS applied when I inspect the blog item rendered on the screen. I'm not sure whether that's because of the I do after I retrieve the content or what but it doesn't simply show.

Any help is much appreciated.

UPDATE: Adding component code:

component.ts

@Component({
    animations: [enterScreenFromBottom],
    selector: 'app-blog-entry',
    templateUrl: 'blog-entry.component.html',
    styleUrls: ['blog-entry.component.scss']
})
export class BlogEntryComponent

...

ngOnInit() {
        this.loading = true;
        this.route.params.subscribe(p => {
            const id = p['id'];
            this.blogService.getById(id)
                            .then(b => {
                                this.blogEntry = b;
                                this.content = this.sanitizer.bypassSecurityTrustHtml(this.blogEntry.content);
                                this.loading = false;
                            })
                            .catch(e => {
                                console.log('Error getting blog entry ' + id, e);
                                this.loading = false;
                            });
        });
    }

component HTML:

<div [@enterScreenFromBottom]="state">
    <p [innerHTML]="content"></p>
</div>

component scss:

iframe {
width: 100% !important;
}