Embedding iframes including Youtube Videos, Google Maps, and more

  1. Overview
  2. Visual Layout
  3. Embedding iframes including Youtube Videos, Google Maps, and more

Claritee has just released an exciting update that allows you to easily embed iFrames, such as YouTube videos, Google Maps, or any other iFrame content, directly into your visual layout. This feature enhances the versatility and interactivity of your content within Claritee.

How to Embed an iFrame:
1. Add an element that you want to link to the iFrame, such as an image, by dragging it onto your canvas.
2. Click the "Quick linking" button at the top (when the element is selected) to add a link to the element.
3. Paste the copied iFrame link (e.g., YouTube video URL) into the link field and press Enter.
4. Click the "Set as iFrame" button from the top-menu to convert the linked element into an iFrame.

For YouTube videos, the iFrame will display a thumbnail of the video, which is clickable and will load the video when clicked. You can access the iFrame link from the canvas, the play preview, or the share link, allowing for easy navigation to the embedded content.

Embedding Google Maps:
To embed a Google Map as an iFrame, follow these steps:
1. Go to Google Maps and locate the map you want to embed.
2. Click the "Share" button and select the "Embed" option.
3. Copy the provided iFrame HTML code.
4. In Claritee, add a new element and click the "Quick linking" button (visible at the top of the page when an element is selected).
5. Paste the copied iFrame HTML code into the link field.
6. Click the "Set as iFrame" button to display the Google Map within your Claritee layout.

Displaying iFrames in color:
You can customize the appearance of the iFrame thumbnail by adjusting the image and color settings in the top right corner of the Claritee interface. This allows you to display the thumbnail in color, enhancing the visual appeal of your embedded content.

With this new iFrame embedding feature, Claritee empowers you to create more engaging and interactive layouts by seamlessly integrating external content. Enjoy using Claritee and leveraging this powerful update in your projects!


Was this article helpful?