Embedding an External Video

HTML, CSS

The External Video component can be used to easily embed an external video into a AEM page. Currently, only videos hosted on YouTube and Vimeo are supported by the component. Experienced users can alternatively use the HTML component for greater customization or displaying videos hosted elsewhere.

Embed a video using the External Video component

 

Click-and-drag the External Video component into a 'Drag components or assets here' field.

Go to your YouTube (http://www.youtube.com/) or Vimeo (http://vimeo.com/) video page and copy (CTRL-C or CMD-C) the web address/url.

Return to your AEM page, click on Edit to open the External Video component properties.

Paste (CTRL-V or CMD-V) the video url from the Youtube or Vimeo website into the "Video URL" field of the External Video dialiogue box. Click the dropdown menu of the "Size" field to set the video size. Click OK.

Size Options

Automatic - sets a maximum width based on the maximum size of its container.

Small, Medium, Large - sets a maximum pixel value width regardless of its container.

Custom - used for videos that do not follow the standard widescreen 16:9 aspect ratio. Width and Height entered in this field is used to define the maximum width and height for the video. The height will adjust itself in proportion to the defined width if no value is specified.

Note: video size changes takes effect after a page refresh.

External Video Component example displaying a Youtube video

Embed a video using the HTML component

Click-and-drag the HTML component into a 'Drag components or assets here' field.

Go to http://www.youtube.com and find the video you would like to embed, then click on the Share button, and then the Embed button. If embedding is permitted, HTML code should appear. Select the video display settings. Note that videos set to 'privacy-enhanced mode' will NOT display properly on AEM sites. After making your selections, copy the video HTML embed code (CTRL-C or CMD-C) from within the embed code box.

For Vimeo videos, visit http://vimeo.com/, find your video, then click "Embed." Click "Customize embed options" to set your video display options, then copy the video HTML code from the "Get the embed code" box.

Return to your AEM page, right-click on the HTML component symbol shown below, and then click Edit (or double-click) to open the HTML Text dialogue box.

Paste (CTRL-V or CMD-V) the embed code into the HTML Text dialogue box. Click OK.

To preview the YouTube video on your page, click on the Sidekick's 'Preview Mode' button (magnifying glass icon at bottom of Sidekick), and then click your browser's Refresh button.

HTML Component example displaying a YouTube Video

Below is the "All about SFU" YouTube video as an example. To learn about embedding other types of code snippets, see the HTML Component.