Follow

Widget: Embedded Content

The embedded content module is for displaying third party content (something from another website). Just paste the embed code into this widget to add a feature from another website onto your page. This is most commonly used for displaying YouTube videos, Google forms, or blogs.

How to embed content

Screen_Shot_2018-10-01_at_1.44.24_pm.png

Opening the page's edit view

  1. Log in
  2. Navigate to the page you wish to edit
  3. Go to the edit menu (3 line icon)
  4. Select "Edit Content & Layout"
  5. Now you can edit your page

edit_section.jpg


Adding an Embedded Content widget

  1. Click and drag the embedded content widget.
  2. Drop it where you wish it to sit on the page.

 Screen_Shot_2018-10-01_at_1.44.24_pm.png


Get the code

Copy the code for what you wish to embed. In this case, we are using code from YouTube to display a video. The code we have copied looks looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/bhTU__jVP8E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 

Editing the heading

  1. Hover over the embedded content widget that you dropped onto the page.
  2. Click 'Edit'
    Screen_Shot_2018-10-01_at_1.46.30_pm.png
  3. Paste the code.
  4. Change the size settings if required.
    Note: the default size setting is for the width and height of your content to change with page dimensions. Keep this if you can, so that your content changes to fit on mobile screens.
    Screen_Shot_2018-10-01_at_1.47.08_pm.png 
  5. Click 'Check Embed Code'
  6. Add a description and/or button caption and link if you wish.
    Screen_Shot_2018-10-01_at_1.50.44_pm.png
  7. Click 'Embed Content'. You will now see the code on the page. 
  8. When you are ready to publish your edits, select 'Publish'.
    publish.jpg

Additional info: How to edit an iframe

Sometime you may need to adjust the height of an iframe, or add something like a scrollbar. So, let's look at the code and how to manipulate it. Here's some code for an iframe:

<iframe src="http://" width="100%" height="400"></iframe>

The core parameters within the iframe tag are:

  • The src (a.k.a. 'source', or the URL of the document/object to be loaded within the iframe), 
  • The width and height of the frame (either specifed as a percentage of the page, or in pixels).

It's fairly common in most users to leave the width as "100%", so you really only need to edit the source and height parameters. The source (src) needs to be a full and properly functional and accessible URL (e.g. to another website, or to a web-friendly document uploaded within Ultranet). For the height, it really depends on the source—if it's tall, increase the height value. If it isn't, or you don't want a long frame, reduce the value (note that scrollbars will display within the iframe anyway if the content is too wide/tall to fit).

In addition to the basic src, width and height parameters described above, you can also use the following parameters to further style/customise your iframe:

  • frameborder - this specifies if there is a border around your frame or not. If the value is set to "1" (default), there is a border. "0" means no border.
  • scrolling - this parameter specifies if scrollbars are rendered in the iframe for over-sized content. The default is "auto", but if you set it to "Yes", scrollbars will always be visible. If set to "No", they will never render (useful to keep an iframe looking tidy, but may reduce usability if content needs to be scrolled and the user does not have a scroll-wheel on their mouse or a scrolling trackpad). 
Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.