Web Page Embed Component

The Web Page Embed component allows you to embed pages or documents from other websites on your page. This is commonly used to bring forms, documents, or external content on a page. This component uses the HTML element called iframe or inline frame to create a virtual browser window on your page. Different from the embed tool in your WYSIWYG editor, this component creates a responsive web page embed from a url, no code necessary.

Component Fields

Title

A description of your embedded web page content. This is used only for accessibility, it will not be visible.

Embed URL

The full link to the website being embedded on the page. Links must include https://

Size

Changes the dimensions of the embedded content. Sizes are based on the width of the content area by creating a ratio that will properly scale on any device.

Square (1:1)
Normal (4:3)
Wide (16:9)
Extra Wide (21:9)

Examples

Example 1

This example uses the Square (1:1) ratio size to embed a WKU Branding Manual PDF. This size is best for viewing the most content.

Title: Example WKU Branding Manual PDF
Embed URL: https://www.wku.edu/marketingandcommunications/documents/wku-communication-and-branding-manual-2018-digital.pdf
Size: Square (1:1)

Example 2

This example uses the Normal (4:3) ratio which is sometimes known as fullscreen.

Title: Example 2 WKU Branding Manual PDF
Embed URL: https://www.wku.edu/marketingandcommunications/documents/wku-communication-and-branding-manual-2018-digital.pdf
Size: Normal (4:3)

Example 3

The Wide (16:9) ratio size is more commonly known as widescreen, this provides a more narrow view of the content to take up less vertical screen space.

Title: Example 3 WKU Branding Manual PDF
Embed URL: https://www.wku.edu/marketingandcommunications/documents/wku-communication-and-branding-manual-2018-digital.pdf
Size: Wide (16:9)