oEmbed iframe outside tailored content

[reefki]

Tailor modify the oEmbed output wrap it with .tailor-responsive-embed class and remove the width and height attribute which is great.

But when we include the embed shortcode either in the post content or in a widget outside tailored post/page where tailor's assets are not available/loaded here is what we get

The iframe is ignoring the width since it was modified while the css to styling it isn't there. I end up by copying _embed.scss into our css file. I think it's better to modify the embed output using a different way, with JavaScript perhaps?

[andrew-worsfold]

@reefki -

By design, Tailor doesn't load CSS or JavaScript on pages that haven't been "tailored". If this is the root cause of your issue, there's an admin setting for enabling CSS/JS resources to be loaded on all pages which may be what you're after.

[reefki]

@andrew-worsfold

I am aware that I can load assets on un-tailored pages from admin settings but that's not my point here. If you would say:

By design, Tailor doesn't load CSS or JavaScript on pages that haven't been "tailored"

Then, it should not modify or hack any content on pages that haven't been "tailored". Instead of loads bunch of Tailor assets on all of the pages, I would rather copy _embed.scss into my CSS file.

As I said, I think it's better to use JS to wrap the embedded content instead of filtering the embed output through PHP. Using JS will result:

1. Will not break embedded content outside Tailored pages.
2. Don't need to load Tailor assets on all pages for only fix the modified embedded content.
3. Embedded content on Tailored pages still can be modified.

I created a gist here that you may want to take a look at: https://gist.github.com/reefki/469b31fb043dc20e56cf65f97b9a0413