Responsive Iframe Embed Codes - UXi® Websites – Marketing 360®

An iframe represents a nested browsing context, effectively embedding another HTML page into the current page.

Basic Example:

<iframe src="//www.google.com/"></iframe>

We can embed iframes to UXi's Embed widget, but getting them to look right on various mobile devices can be tricky, depending on the content of the iframe.

Each iframe includes src="" or iframe source. This is the URL of the site that's being displayed in the iframe tag.

CSS cannot be added to re-style the content of an iFrame; we can only add CSS to the iFrame element itself. For example, if an iframe of Google.com was added, we could give the iFrame custom styles to determine their width & height, but not change the Google logo or the color of the search button.

By adding some extra HTML we can make the iframe fit it's container better, but depending on the CSS styles of the iframe's content, it may not be a good option for mobile uses.

Customizing Iframes

Adding a div tag that surrounds the iframe can help us apply the best possible css for an iframe. UXi comes pre-built with some helpful CSS meant for this exact purpose.

<div class="flex-embed">
<iframe src="//www.example-site.com/"></iframe>
</div>

The 'flex-embed' CSS class will add styles to the iframe itself.

.flex-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

*This is built-in so it does not have to be added to custom css.

Adding a Custom CSS Class to the Iframe

Next, add a new css class to the iframe to give it custom display options in UXi's Custom CSS dashboard. This example will use 'singup' as an example css class

<div class="flex-embed signup">
<iframe src="//www.example-site.com/"></iframe>
</div>

As mentioned above, the flex-embed class will stretch the iFrame to 100% width of it's container.

The padding-bottom property is responsible for determining the height of these responsive iFrames. The new signup class will be used to add the padding-bottom.

.signup { padding-bottom: 80%; }

Other custom styles can also be added to the new class where needed.

Other Iframe Customization

Other tags can be added to an iframe after the src="" tag for further optimization.

frameborder="0" specifies whether or not to display a border around an <iframe>.
allowfullscreen="true" can be set to allow the iframe to be placed into full screen mode. If this isn't set, the element can't be placed into full screen mode.

Secure Iframes

If the UXi site is using an SSL certificate, it's URL will include https:// at the beginning. In this case, any iframe loaded on the site must also be loaded from a secured URL using https.
Secured UXi sites deliver HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default. Consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). Passive mixed content is displayed by default, but users can set a preference to block this type of content, as well.
Note that since mixed content blocking happens in Chrome, Safari, Firefox, and Internet Explorer.
The best strategy to avoid mixed content blocking is to serve all the content as HTTPS instead of HTTP. For your own domain, serve all content as HTTPS and fix your links. Often, the HTTPS version of the content already exists and this just requires adding an "s" to links - http:// to https://.
For other domains, use the site's HTTPS version if available. If HTTPS is not available, you can try contacting the domain and asking them if they can make the content available via HTTPS.
To find out if the URL can be iframed from an https: location, simply copy the URL form the src tag and open it in a new tab using https:// in the place of http:/
The best practice for adding the URL is to load it with a relative path, or beginning with // The examples above all use this technique. This lets the URL of the site to determine the URL of the iframed content.
If the site is loaded on https, it will load the iframe from https://
If the site is loaded on http, it will load the iframe from http://

Custom Video Embeds

Adding videos to UXi should be done with one of three methods

Video widget to add a video to a layout.
Lightbox widget to add a link to a video that will pop open in a lightbox.
Video shortcode to add a video to page or post content.

In the situation that a video must be hard-coded, use one of the following HTML structures. Please be sure to include video widths, even though they are not specifically used to size the videos within the UXi grid.

YOUTUBE 16 x 9 (widescreen aspect) :

<div class="flex-embed youtube _16by9">
<iframe src="//www.youtube.com/embed/6PKqyfnFA1w?wmode=opaque&rel=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

VIMEO 16 x 9 (widescreen aspect) :

<div class="flex-embed vimeo _16by9">
<iframe src="//player.vimeo.com/video/104514633?title=0&byline=0&portrait=0&wmode=opaque" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

YOUTUBE 4 x 3 (standard aspect) :

<div class="flex-embed youtube _4by3">
<iframe src="//www.youtube.com/embed/6PKqyfnFA1w?wmode=opaque&rel=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

VIMEO 4 X 3 (standard aspect) :

<div class="flex-embed vimeo _4by3">
<iframe src="//player.vimeo.com/video/104514633?title=0&byline=0&portrait=0&wmode=opaque" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>