-1

I want to add embed media in TinyMce with media plugin. When I add an embed video for example with specific size value, when I save the post, the width is not correct. The following HTML is created:

<iframe src="//www.youtube.com/embed/XlpTLDulFe8" width="100" height="100" allowfullscreen="allowfullscreen"></iframe>

But infortunatly, i've the folowing CSS (mdl CSS) that overload my width-size: 

iframe {
    display: block;
    width: 100%;
    border: none;
}

I want to use instead a max-width:100%; for keep iFrame width if it isn't superior to 100%

How can I disable the width property for iFrame created by TinyMce ? I've tried to get the HtmlElement for remove property and set another but without success.

Sabri
  • 112
  • 9

1 Answers1

0

I found a solution to my problem, this isn't the clever one but this still works well. I apply the css property to the parent <p> of the <iframe> (all iframe are put in <p> tag)

I use the following function

public correctWidthIframe(html: string) {
    let regex = /<p[^>]*>(<iframe*[^>]+(width=*[^height]*height="[0-9]*")[^>]*><\/iframe><\/p>)/g;
    return html.replace(regex, (match, p1, p2) => {
        let dimension = p2.match(/[0-9]+/g);
        let style: string = '<p style="max-width:'+dimension.shift()+'px;">'; // only width is wrong
        return style + p1;
    });
}

I use this function when i want to create and modify message that contain embedVideo.

Sabri
  • 112
  • 9