The purpose of Embed is to help you quickly embed common media types into your webpages. People often come to us asking what code is needed to embed different types of media that aren't natively supported by RapidWeaver. The Embed stack provides a reliable, safe and easy method towards embedding different content types. Many of the content types now supported in Embed 2.0 require no complicated code or configuration. Images and video both scale responsively.

Examples

Here are some examples of the Embed stack being used to embed different content types:
 
Facebook Post
 
 
HTML5 Audio
 
 
HTML5 Video
 
 
Warehoused Image
 
My Image
 
Instagram Post
 

Patch of sunshine

A post shared by Will Woodgate (@mrwillwoodgate) on

 
iFrame (containing a PDF)
 
 
Embedded Video
 

Setup

Embed 3 and later now requires a minimum of Stacks 3.5. Follow these instructions for getting an Embed stack setup in your project:
  1. Once installed, open your Stacks library and search for 'Embed'. Drag and drop a copy of the Embed stack into your stacks page
  2. In the Embed settings, change the Content Type to suit the type of content you want to embed
  3. Mouseover the stack settings to see what each setting does. An informational tooltip is displayed
  4. Choose the type of content to embed from the menu. The relevant settings for that content are then shown
  5. Preview your page to see the result. Publish when done.

You can safely use multiple Embed stacks on the same webpage. Most content types can be previewed locally in RapidWeaver, however there are some (like AdSense) that may not work inside RapidWeaver. Additionally please note that some websites block themselves from being embedded on your own website, within an iFrame.

The Image Directory and CSV content sources require that you change your page extension to .php in the RapidWeaver Page Inspector. You provide a relative path (an address not starting http:// or https://) to a directory of images or CSV file that you want to pull into the page. In the case of images, multiple images get rendered as a grid and a CSV file is rendered as a simple table. For improved speed and security, the directory of images should be located on the same domain, where the Embed stack is published. ProGallery and RWExtras CSV To Table stacks provide more options for how your images or CSVs files are handled.

Print output of Embed stacks varies, depending on the content type you are embedding. Most web browsers appear to generally print whatever is visible on the page.

Responsive support

Audio, video and images are scaled-down to fit the size of the area they are placed within. Plain text will often reflow to fit the area it's placed within. iFrames are much-less responsive and typically don't work well on touch devices. Consider using our free UsefulStack to hide iFramed content. These stacks will let you hide the Embed stack on smaller screens or touch devices.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.