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:
 
HTML5 Audio
 
 
HTML5 Video
 
 
Warehoused Image
 
My Image
 
iFrame (containing a PDF)
 

Setup

Follow these instructions for getting an Embed stack setup in your project:
Once installed, open your Stacks library and search for 'Embed'. Drag and drop a copy of the Embed stack into your stacks page
In the Embed settings, change the Content Type to suit the type of content you want to embed
Mouseover the stack settings to see what each setting does. An informational tooltip is displayed
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 iFrames) that may not work inside RapidWeaver.

The Image Directory content source requires that you change your page extension to .php in the RapidWeaver Page Inspector. You provide a relative path to a directory of images that you want to pull into the page (this multiple images get rendered as a grid). For improved speed and security, the directory of images should be located on the same domain, where the Embed stack is published.

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

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 or RottenApple stack to hide iFramed content. These stacks will let you hide the Embed stack on smaller screens or touch devices.

Updating from version 1 to version 2

The update is provided free. Some reconfiguration of Embed stacks may be required after you apply the update. We no longer embed webpages or PDF files using HTML <object> tags; we now use iFrames which offer slightly better browser compatibility and fixes compatibility problems with certain other RapidWeaver addons. New content types like HTML5 audio, HTML5 video, images, image directories and plain text are now supported.
 

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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.