Embeddables

The below examples provide an idea of how one might be able to integrate 3rd party entities into the site via iframe. A common use case for this would be Google Maps, as displayed below.

The component allows administrators to define the aspect ratio they would like toe embedded entity to be displayed in on desktop devices, as well as optionally defining a different aspect ratio for mobile devices. In the below case, the map will occupy a 3:2 ratio on desktop, and 5:4 on mobile.

Embeddables may be set to occupy the full width of a page; as demonstrated below, where aspect ratios have been set to 5:1 on desktop, and 4:3 on mobile.

The below example demonstrates how a Youtube video may be added onto a page using the Embed component.

In this case, the embed is set to adopt a 16:9 ratio on desktop, and a 5:4 ratio on mobile resolutions.

When not in full-screen mode, the embed component allows administrators to assign one of four width options to the embed component, widest, wide, narrow, narrowest.

The above example is output using the ‘widest’ width option; while the below three examples demonstrate what the component would look like with one of the other three options selected. In all cases, the same aspect ratio settings have been selected.