CODEWITHSUNDEEP
cssiframeangular5
Jonas Mohammed
Jonas Mohammed

Reputation: 417

Can't apply css to an iframe (the tag itself)

I have a content editor, and using that editor I want the user to be able to save links to external domains and display that as an iframe.

The iframe shows up, however when I try to apply CSS rules to the iframe (not the content inside the iframe, the tag itself), it doesn't work no matter what I do, and the rules doesn't even show up in developer console. I have more rules in the same sheet which work just fine.

Currently I have the following css:

iframe, .ql-video {
  height: 500px !important;
  width: 300px !important;
}

And this is the iframe I'm testing on:

<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/GKqEoSiAi90?showinfo=0" data-ss1531946992="1" data-ss1531947568="1"></iframe>

But the css simply doesn't affect it at all. It's not disabled or overriden, it simply doesn't show up at all.

developer console rules

If I add the rules to element.style it works as I want, however I need the rules to be there when the iframe is loaded. Unfortunatly I can't style it inline as the iframe (and the rest of the content) is retrieved from a database as a string.

This is how I retrieve the content (of which the iframe is a part of):

this.contentService.getSpecificArticle(this.route.snapshot.queryParams["newsid"]).subscribe( news => {
  document.getElementById('main_content').innerHTML = (news as any).content;
  ...
});

I'm doing it this way because the editor saves the content as pure html.

So any idea why I can't style the iframe tag this way?

EDIT: I've also tried interpolating the content however, angular sanitizes away the iframe then, as well as property binding, but then the content shows up as a string. This is why I used .innerHTML, but I do suspect it might be because of this, though I'm not sure why if that's the case, or how I can work around it.

Upvotes: 2

Views: 3972

Answers (1)

ratherblue
ratherblue

Reputation: 2108

If your CSS is coming from a CSS module it won't apply styles to nested components. (Which is an important feature of CSS modules).

Try adding /deep/ in front of your CSS for your iframe (although /deep/ is deprecated, you're supposed to use ::ng-deep instead now)

/deep/ .ql-video {
  height: 500px !important;
  width: 300px !important;
}

(Also, you're not reeaallly supposed to use /deep/, you should make CSS for that specific component and apply it there.)

Here's some information on Angular's component styles and 'deep': https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Upvotes: 3

Related Questions