Support » Plugin: Responsive iframe » Responsive iFrame on a (standard) page

  • N. A.

    (@nicolof)


    Hi Patrick,

    a quick question, if I want to add an iFrame to a (standard) page (not a blog post) using your plugin, how can I do that?

    Best regards
    Nico Fiscella

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author patrickpelayo

    (@patrickpelayo)

    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?

    Thread Starter N. A.

    (@nicolof)

    Gutenberg block hmm

    I think I use the “WPBakery Page Builder”. How do I do it with this πŸ˜€

    Thread Starter N. A.

    (@nicolof)

    ahh found it, cool πŸ™‚
    I’m looking for the right settings right now..

    Thread Starter N. A.

    (@nicolof)

    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

    Plugin Author patrickpelayo

    (@patrickpelayo)

    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/

    Thread Starter N. A.

    (@nicolof)

    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 πŸ˜€

    Plugin Author patrickpelayo

    (@patrickpelayo)

    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 2 months, 3 weeks ago by patrickpelayo.
    Thread Starter N. A.

    (@nicolof)

    ..great news Patrick!

    I will try it now and report back to you, thank you for your support πŸ™‚

    Thread Starter N. A.

    (@nicolof)

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

    Plugin Author patrickpelayo

    (@patrickpelayo)

    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.

    Thread Starter N. A.

    (@nicolof)

    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.

    Plugin Author patrickpelayo

    (@patrickpelayo)

    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.