Menu

Responsive Embed

Stacks Image 981

Stack Info


  • The Responsive Embed stack makes embed code responsive and gives options to limit the dimensions of the embed. This is great for putting any embed in your site from You Tube to Google Maps into a responsive site.

  • Current Version: 1.1.0

  • Release Date: 16th July 2013

  • Last Update: 16th August 2013

  • Responsive: Yes

  • Requires: Rapidweaver 5+ and Stacks 2+

  • Browser Compatibility: IE7+, Safari, Chrome, Firefox

User Guide

Video Overview

COMING SOON

Getting Started
The Responsive Embed stack is relatively easy to get up and running quickly. The basic thing the Stack needs is the embed code to display, this can be found on the site you would like to display information from; for example if you want to display a You Tube video the embed code can be found on a video page under "Share". For more information on finding the embed code check out the section just below this one.

After finding the embed code the next steps are as follows
-Remove the Height and Width attributes from the embed code
-Select a maximum height and width from the options bar and an Alignment.
Then you are good to go!
Custom Options Info
Stacks Image 1090
Click on the options below to expand more information
Embed Code
Insert the embed code from the website you would like to display. For more information on finding the embed code please see the section below. To make the embed responsive please remove the height and width attributes of the code. The attributes are usually in the style of "height=400"
Limit Width
Enable this box to set the maximum dimensions for the embed container.
Max Width
Set the maximum width for the embed container. The width will not exceed this value.
Max Height
Set the maximum height for the embed container. The height will not exceed this value.
Alignment
Set how the container will be aligned. NOTE- This does not work with all embeds.
Finding the Embed Code
Finding the embed code is very different on a site to site basis, most providers such as You Tube and Vimeo display the embed code under a "Share" section. If you are having any problems finding the embed code using the providers help documents might guide you to an answer but if not feel free to get in touch and I can do my best to help you out.
Making the embed responsive
Embed code normally comes with a set Height and Width, removing this code along with the Stacks code allows the frame the content is displayed in to be responsive.
The width and height attributes are usually formatted like the text below, just delete them from your embed code and your good to go.
If the content inside the frame is not responsive then the stack will only re-size the frame around causing the content inside to be cut off.
width="1280" height="720" src="//www.youtube.com/embed/UB70O2YmnME?rel=0" frameborder="0" allowfullscreen>
FAQ's
How do I update Responsive Embed?

This stack uses the auto updater that is built into the stacks plug in, it will alert you when an update is available. Please follow the instructions on the updater to guide you through the process. If you are having problems you can re download and re install responsive embed using your original download link


How do I find my lost download link?

Please visit this link and enter your details to be resent your invoice which includes your download link.

Where do I send feature requests?

I am always looking for ways to update and improve my themes and stacks so I would love to hear your thoughts. Please send them in using the contact form on the contact page here

What if my embed isn't responsive?

Unfortunately some websites create the iFrame at a fixed width so until they allow that option there is currently no solution, please get in touch for more info.

Why is my stack cutting off a bit of the embed?

Due to the nature of the stack sometimes the bottom section will be cut off, to fix this just add some bottom padding from the stacks options bar.

Where can I find the embed code?

Every site has a different way of getting embed code from them, the best option is to look through the providers support documents but if you are having trouble feel free to get in touch.

The stack won't install

The downloaded file is a .dmg file so you need to open that up and double click on the stack icon to install, a message alerting you that the stack has been installed successfully should pop up. If you are still having problems you will need to manually add the stack into your stack folder; if you need help doing that get in touch.

My You Tube/Vimeo video is not loading
In some cases the embed code link starts with "//www…", in preview mode Rapidweaver does not recognize this so you need to add "http:" to the front of the code.

Demo

These are just some the examples of what you can embed.
Re-Size the browser window to see the embeds react to the size of the screen

You Tube

Please enter your embed code here

Vimeo

Please enter your embed code here

Google Maps

Please enter your embed code here