Tell me about updates

Inserting iFrames

This is a guide to show how to insert a responsive iFrame into your page content

What is an iFrame

An iFrame (short for inline frame) is an HTML element that allows an external web page to be embedded in an HTML document. The iFrame can be a Youtube video, a Facebook post or a third-party service portal.


Why you would use a Responsive iFrame

Your iFrame (Youtube video, Facebook post or any embedded element) can be displayed correctly on any screen resolution and device.


Example of a Responsive iFrame

Please see the Youtube iFrame on this page: https://www.interactivepartners.com.au/WebEd-Editing-Basics which can stay in proportion even you try to resize the window.


How to Insert A Responsive iFrame

Steps to Insert the iFrame

STEP-BY-STEP
  • 1

    Please follow Editing Pages to open the page editor

  • 2

    Click the "Source" button to toggle the Source video of the page editor

    Iframes

How Determine the Aspect Ratio

  • Determine the aspect ratio of your video
  • Most YouTube videos are 16x9
  • We support responsive for the following ratios: 16x9, 4x3, and 19x16.
  • If you like to have another ratio, please contact us at: support@interactivepartners.com.au

Insert DIV wrapper prefix

STEP-BY-STEP
  • 1

    Copy and paste the DIV for your iFrame aspect ration

    • 16x9 < div class="container-iframe container-iframe-16x9" > (most common)
    • 19x16 < div class="container-iframe container-iframe-19x16" >
    • 4x3 < div class="container-iframe container-iframe-4x3" >
  • 2

    Immediately after this, paste your iFrame code

  • 3

    Then insert the closing DIV < /div >

  • 4

    The code should appear similar to this

    < div class="container-iframe container-iframe-16x9" > < iframe width="XXX" height="YYY" src="https://www.youtube.com/embed/.... >< /iframe >< /div >

  • 5

    Click the Source button to switch back to design mode

  • 6

    Click Save to save the content.

  • 7

    The code should appear similar to this

    < div class="container-iframe container-iframe-16x9" > < iframe width="XXX" height="YYY" src="https://www.youtube.com/embed/.... >< /iframe >< /div >

If you have applied this to your iFrame, but it is still not working as expected, please contact us at support@interactivepartners.com.au


How to update iFrame on the page

STEP-BY-STEP
  • 1

    Go to the desired page

  • 2

    Edit the page

  • 3

    Double-click the iFrame

    Iframes
  • 4

    iFrame properties will pop up

    • General
      • URL - this is the iFrame URL
      • Width - this will be iFrame width
      • Height - this will be iFrame height
      • Alignment - this will be iFrame alignment
      • Enable scrollbars - if this is ticked, it will enable scrollbars for the iFrame
      • Show frame border - if this is ticked, it will enable scrollbars for the iFrame
      • Name - this will be the iFrame name
      • Advisory Title - this will be the title of the iFrame
      • Long Description URL - this will be the description of the iFrame
    • Advanced
      • ID - you can set anchor ID here
      • Style - you can set the iFrame styling here
      • Stylesheet Classes - you can set iFrame style class here
    Iframes
  • 5

    Update the fields accordingly

  • 6

    Click OK

  • 7

    Click Save and Close


f