#  Embed 

 



 ##  

  expand\_more  

 
  

 

## How to add an Embed component

### Step 1: Add and configure Embed component

1. Add an Embed component (see [Adding a component](/adding-component "Adding a component") for instructions on how to add a component).
2. Select the **Section Heading** tab to add an optional section that appears at the top of the Embed component (see [Adding a component heading](/adding-section-heading "Adding a section heading") for details about adding a section heading).
3. Select the **Block Settings** tab.
4. Select a size option for the Embed item from the **Embed Width** menu: **Small**, **Medium**, **Large**, or **Full Width**.
5. Select a size ratio for the Embed component from the **Height Ratio** menu (see [Image Sizes](/resource/image-sizes-old "Image Sizes") for details about different image ratios:
    1. Choose **Auto** to set the ratio automatically.
    2. Choose **Square (1:1)** for a square.
    3. Choose **Narrow Landscape (4:3)** for a standard horizontal rectangle.
    4. Choose **Medium Landscape (3:2)** for a more square horizontal rectangle.
    5. Choose **Wide Landscape (16:9)** for a widescreen horizontal rectangle.
    6. Choose **Short Portrait (3:4)** for a standard vertical rectangle.
    7. Choose **Medium Portrait (2:3)** for a more square vertical rectangle.
    8. Choose **Tall Portrait (9:16)** for a tall vertical rectangle.
6. Add an optional **Page Anchor Link** to allow for links to the Embed component (see instructions under [Linking to page content](/linking-page-anchor-links "Linking to on-page anchor links")).

### Step 2: Add content and save

1. Select the **Content** tab.
2. Provide a **Title** for the embedded content. Note that the title text will not display on the page. Its purpose is to provide a description of the embedded content for screen reader users and search engines.
3. Enter the HTML code for the embedded content in the **iframe code** field. The Embed component supports code provided for this purpose by other platforms, such as Google Maps and Qualtrics.
    1. **Please note**: Only iframe code is allowed. Embedding JavaScript or CSS is not supported.

   ![Screenshot showing Google Maps embed dialog with callout numbers marking the Embed a map control and Copy HTML option.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-09/screenshot_google_maps_embed.png?itok=33sfeoEk) 

 

Locate the option to embed content provided by the platform (Google Maps shown in this example) **(1)** and then copy the HTML associated with the content **(2)** to paste into the Embed component.4. Once you have finished adding the Embed item, choose **Save** to save the Embed component.

## What is an Embed?

An Embed component is a block that displays content and functionality from other platforms, such as Qualtrics forms and Google Maps, directly on your website. Note that there is a separate [Video component](/video "Video") for embedding video content.

An Embed component can be used to present content and functionality that is better managed on another platform, or that is otherwise not available on the platform.

An Embed component is composed of an optional Section Heading, with a heading, introduction, and call to action links, and the embedded content and controls.

   ![Screenshot of Embed component with callout numbers marking the section heading, introduction, call to action links, and embedded Google map.](/sites/g/files/omnuum1651/files/styles/hwp_1_1__720x720_scale/public/2024-09/annotation_embed.png?itok=iUiotSNe) 

 

An Embed component is composed of an optional section heading, with a heading **(1)**, introduction **(2)**, and call to action links **(3)**, followed by the embedded content **(4)** (see the [example Embed component](https://drupaldemo.harvardsites.harvard.edu/contact#example-embed) on the Drupal Demo Site).

 

---

 

##  Learn more about the Embed component 

 



 ### Examples

Demo Site

See an example of the Embed component on the [Contact page](https://drupaldemo.harvardsites.harvard.edu/contact#example-embed) of the Department of Rocket Science demo site.



 

   ![](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/Firefly%20rocket%20in%20space%209486.jpg?itok=zBGEAUN2) 

 

 

 

 ### Accessibility

Digital Accessibility Website

Review guidance on [selecting accessible tools and services](https://accessibility.huit.harvard.edu/managers#vendors) from the Harvard Digital Accessibility website.



 

   ![Icons for touch, sight, accessibility, cognition, and hearing](/sites/g/files/omnuum1651/files/styles/hwp_16_9__480x270/public/2024-12/thumb_das.png?itok=j55tHWpY) 

 

 

 

  

 

 

 

 



 

 See also:- [ Components ](/site-section/components)
- [ How-tos ](/content-structure/how-tos)