This element allows you to embed different kinds of web content, such as videos, audio, interactive media, and so on.
The following are the Embed element settings:
Height
- Defines the size of the element. As this element uses an iframe to embed the content into your Visualization, you need to adjust the height manually.
Iframe URL
- Add in this field the URL of the content you want to embed.
- The content must be served over HTTPS protocol.
Bear in mind
There are some sites that do not allow to be embedded, e.g., Google. If the content you want to embed is hosted by you, check with your IT team if it has all the necessary permissions to be embedded.
Margins
- Creates space between the elements by increasing the number of pixels.
External Content
- Adds content from an HTTP site into your Visualization. You will need to make changes to be able to display the embedded content. Check out How to display HTTP content using the embed element to learn how to do it.
- Embeds content from Spotify, YouTube, Google Maps, Vimeo, Facebook Live videos, etc. To know how you can embed these contents, read the Embedding external content article.
Mobile View
Our Embed element has a fixed height (value in px) that you can configure in the Visualizations editor. This may cause that in some cases, that value is not ideal for all screen sizes.
Fortunately, it is possible to correct this via custom CSS. With the following code, the value is overridden to be a percentage instead of a fixed value in px:
/* make embed element "responsive" */
.content-node-tag.embed {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.content-node-tag.embed iframe.embed-iframe {
border: 0;
height: 100% !important;
left: 0;
position: absolute;
top: 0;
width: 100%;
}