You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#114334 Iframes not always recognised and allowed

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by BruceB on Saturday, 05 August 2023 15:10 BST

BruceB
I am finding that JCE sometimes allows and sometimes disallows iframes. When I enter this code for a youtube video, it is allowed, and the video displays in the article:

<iframe src="https://www.youtube.com/embed/GO376G4tbGM" width="350" height="197" title="YouTube video player" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
However, when I enter this code for a video hosted on bunny.net the video does not display on the front end unless I surround the code with {source}{/source} tags (from the Regular Labs Sourcerer extension):

<div style=" position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/108305/e065adfe-03d2-4c32-83d7-515ec9c70ccc"
style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" loading="lazy" allow="accelerometer;gyroscope;encrypted-media;picture-in-picture;" allowfullscreen="allowfullscreen"></iframe></div>
I have enabled the iframe option in the Plugin Parameters > Media Support section of the relevant JCE profile (see attached screenshot). Any help or guidance would be much appreciated!

Attachments

Ryan
The iframely code includes additional markup to make the iframe "responsive". JCE has some support for this, but requires a slight change in the HTML, which will have the same effect as the original code. Change padding-top in the div style attribtue to padding-bottom, eg:

<div style="position: relative; padding-bottom: 56.25%;">

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

BruceB
Thank you for your reply, Ryan. I have tried what you suggested, but the problem remains: it works with {source}{/source}, but not without those codes. Here is my code (with the {source} tags):

{source}<div style=" position: relative; padding-bottom: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/108305/e065adfe-03d2-4c32-83d7-515ec9c70ccc" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" loading="lazy" allow="accelerometer;gyroscope;encrypted-media;picture-in-picture;"  allowfullscreen="allowfullscreen"></iframe></div>{/source}
Without the {source} tags I get the display shown in the attached screenshot.

Attachments

Ryan
Can you see the video in the Preview tab after insering the code into the editor?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

BruceB
No, not even when I include the {source} tags.

Attachments

Ryan
This is working fine in my tests.

Please send me a login - https://www.joomlacontenteditor.net/contact/site-login

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

BruceB
I have sent the details.

Ryan
The issue here I think is that you posted the HTML code directly into the editor, rather than into the Code tab, so the code was reformatted as text.

To paste HTML code into the editor, click the Code tab, then paste in the HTML and click the Editor tab to see the result.

I have successfully tested this in the Video 2 article on your site.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

BruceB
Thank you so much, Ryan. That seems to be a very simple solution. I'm not sure why I didn't try that.

Best regards
Bruce