The Embed Components allow administrators to integrate third-party iframes, such as those generated by YouTube or Google Maps, into a page seamlessly.
This component offers several configuration options, divided into the following categories:
| Settings |
This section contains general settings that apply across all components in the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Choose a background colour from a pre-configured list of brand colours.
- Section Width: Set the width of the component’s container, which can control the size of the embed.
|
| Animation |
Administrators can select from seven entrance animation options for the embed:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Pod Styling |
This section allows administrators to configure the styling of the embed content through various options:
- Embed Aspect Ratio: Set the aspect ratio (width:height) for the embed on desktop resolutions. A 16:9 ratio is recommended for YouTube videos.
- Embed Aspect Ratio (Mobile): Set the aspect ratio for mobile resolutions. Again, a 16:9 ratio is recommended for YouTube videos, while a 5:4 ratio may be more appropriate for Google Maps or similar resources.
- Full Width: Choose whether the embed should occupy the full width of the browser or be restricted to a fixed grid. To ensure the embed occupies the full width, the Section Width in the settings tab must be set to ‘Widest.’ If another value is selected, the width will be calculated as a percentage of the browser’s width.
|
| Content |
This section allows administrators to input and manage the iframe embed code:
- Embed: Paste the iframe HTML from third-party sources (such as YouTube or Google Maps) into this field. The iframe will be rendered correctly on the frontend.
|
You can view examples of Embed Components in different styles and animations here.
