Responsive iFrame on a (standard) page

The process for inserting the iframe is the same way for pages as it is for blogs. It is inserted directly as a Gutenberg block.

I notice a bunch of _ngcontent in your html. Are you using a page builder or other framework to build your pages?

Gutenberg block hmm

I think I use the “WPBakery Page Builder”. How do I do it with this ??

ahh found it, cool ??
I’m looking for the right settings right now..

Do you have any tips/examples for the settings?

Because the way I set it, it looks great on the desktop but not on the mobile phone ??

My settings:
Site Width 1000
Site Height 3000

Scroll Bar yes
Border no

UseMaxWidth(This will disable scaling) yes
Max-Width 3000

Best regards Nico

Glad you were able to get it working.
I see what is going on and why the iframe looks like desktop when in mobile.
I didn’t account for the case when the website being iframe has a mobile and desktop view.

I should be able to add into advanced settings options to trigger different width’s of the website dependent on screen width as a solution to this.

Will take me about a week to implement this with my current schedule.
Thank you very much for bringing this to my attention.

A tip I would recommend is to use your browser tools to view your website at different widths when developing. It is usually f12 to access these tools.

Chrome instructions here, but other major browsers have their own tools.
https://developer.chrome.com/docs/devtools/device-mode/

It’s nice that you can improve your plugin with my input, I think it’s cool.
Then I like to wait for your completion, because I think your plugin is simple and good – with your update it will be the best on WordPress!

My views are as follows:
Width of the content: 1240px
Sidebar width: 25%

Screen width for laptops: 1280px
Screen width for tablets (landscape format): 1024px
Screen width for smartphones: 600px

I look forward to hearing from you here as soon as I can test your new features ??

Thank you for your patience.
I just updated the plugin to include under the advanced settings the ability to include breakpoints.

This update shouldn’t break anything, but after updating check your other posts using the Responsive Iframe plugin to make sure they appear fine.

The breakpoints will trigger at and below the specified Breakpoint Width.

So an example would be

• BreakPoint 1 for labtops BreakPoint Width 1280px, Site Width the width you want displayed.
• BreakPoint 2 for tablets BreakPoint Width 1024px, Site Width the width you want displayed.
• BreakPoint 3 for smartphones BreakPoint Width 600px, Site Width the width you want displayed.

Breakpoint 1 will trigger between 1025px-1280px.
Breakpoint 2 will trigger between 601px-1024px.
Breakpoint 3 will trigger 600px and below.

I recommend using the developer tools in your browser to view the appearance of the content at different screen widths to make sure things look the way you want.

• This reply was modified 3 years, 4 months ago by patrickpelayo.

..great news Patrick!

I will try it now and report back to you, thank you for your support ??

..hmm where do I find the “advanced settings” exactly? Regards Nico

It is below the iframe settings where you set site url,width,height,scroll bar, and etc.

It says Advanced. Expand Advanced and you can add breakpoints. I also added the max width setting under other options.

So I only see under “Advanced”:

UseMaxWidth (This will disable scaling)
Max width 3000

Additional CSS class (es)

Separate multiple classes with spaces.

-> Plugin is updated.

Sounds like it could be a caching issue.
Try refreshing your browser cache by holding shift and then hitting f5. Try ctrl+f5 as well. Do this on the edit page where you would normally create posts and use the plugin.

Most browsers will clear the cache doing that.
Let me know if this solves the issue.