Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #834639

    Hello,

    We need to show an external website inside an iframe on a page.
    But for some reason we can’t get it working. See the demo link in private.

    <iframe src=”http://edition.cnn.com&#8221; name=”silkphotos” scrolling=”auto” frameborder=”no” align=”left” height = “100%” width = “100%”>
    </iframe>

    • This topic was modified 6 years, 9 months ago by tech500.
    #834644

    Please provide a working iframe code that would work using the “blank template” in Enfold.
    We need to go live with this page today.

    Thanks
    Dan

    #834728

    *** SOLVED ***

    HELLO,
    I’ve figured how to achieve this, and here are instructions how I did it:
    (If the Kriesi team finds an error here or any suggestions for improvement, please feel free to make changes to my post.)
    I hope that would save time for others looking for such option.
    Option No. 1:

    • Make sure your page template is set to Blank.
    • Place a Color Section > Section Minimum Height > “At least 100% Browser Window Height”
    • Under “Section ID” place this Attribute: fullwidthsection
    • Save
    • Into that color section add a Text Block module.
    • move to the text mode (not Visual) and paste that code:
    • <iframe src="http://kriesi.at/" width="100%" height="1500px" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
      (replace the kriesi link I use for this demo with the link you want to display in the iframe)

    • Save
    • Then add this CSS in Enfold’s “Quick CSS” area (under the theme General Settings):

      #fullwidthsection .container {
      width: 100% !important;
      padding:0px;
      max-width: none !important;
      }
      .avia-section.av-minimum-height .container .content p{
      	margin:0px;
      }

    Option No. 2:
    If you enable the Enfold debug mode then you can paste my code and then use the builder to edit the Enfold element with your URL.

    • First enable debug mode by looking at that link:
      Enable Debug Mode
    • Then paste this shortcode on the relevant page “debug area:
    • [av_section min_height='100' min_height_px='500px' padding='no-padding' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' id='fullwidthsection' color='main_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0']
      [av_textblock size='' font_color='' color='' admin_preview_bg='']
      <iframe src="http://kriesi.at/" width="100%" height="1500px" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
      [/av_textblock]
      [/av_section]
      
    • Then add this CSS in Enfold’s “Quick CSS” area (under the theme General Settings):
    • #fullwidthsection .container {
      width: 100% !important;
      padding:0px;
      max-width: none !important;
      }
      
      .avia-section.av-minimum-height .container .content p{
      	margin:0px;
      }

    Best
    Dan

    • This reply was modified 6 years, 9 months ago by tech500.
    #834974

    Hi Dan,

    Great, glad you found a solution thanks a lot for sharing. Much appreciated :-)

    Best regards,
    Rikard

    #850924

    Thanks Dan, much obliged, I managed to get this to work first time around :-)

    I used option 1, is there much difference between them?

    My next task is to try and make it work in a column, as opposed to a full page. So far not getting anywhere!

    Would option 2 permit this? So far staying with things I understand!

    Many thanks
    Angus

    #944542

    I have tested this with option 1 and it works perfectly with <iframe src=”http://kriesi.at/&#8221; width=”100%” height=”1500px” scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>
    But as soon as i put my own link in, it does not pull through ie – <iframe src=”https://www.behance.net/ACCOUNTSd914&#8243; width=”100%” height=”1500px” scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>

    Any Suggestions?

    Just realized this is probably because im trying to display a page that i am logged in on. So it probably wont work.

    Logged out now, and tried displaying a public page https://www.behance.net/search, but it does not work :/

    any suggestions?

    #944821

    Hi MDOTDesignStudio,

    It can’t display pages where a login is required, though it should display public pages. Where can we see the actual issue?

    Best regards,
    Rikard

    #954955

    I was able to add a content element of “code block” and paste in an <iframe> tag

    #954969

    Hi,
    Thanks for sharing your solution.

    Best regards,
    Mike

    #961773

    Thank you so much! Option 1 was easy to follow and worked!

    #1287383

    Another simple way is to create an HTML “Widget” and then use that in your page.

    #1287432

    Hi,

    @fm921
    thank you for sharing, since this thread had a solution from 2017, we will go ahead and close this.
    Thank you for using Enfold.

    Best regards,
    Mike

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Embedding external site in enfold iframe’ is closed to new replies.