Recipe - Simple mobile-friendly iFrame Embeds

Skill level: Intermediate

Organization: Calvary Church (St. Peters, MO)

Requires Rock: 1.6.0

{# strip images & classes from the HTML but otherwise leave structure #}

Enabling mobile-friendly external content from iFrame's on your Rock-powered website

Background

Most content on your Rock-powered website will have it's source defined directly in Rock. However, sometimes you need to integrate external content, such as published Google Docs, Google Sheets, and Google Slides presentations, along with an external video player, such as YouTube. Often times these external content sources will provide an 'embed' code (HTML) using iFrames. These embed codes are great, but usually do not play nice with mobile browsers. What do you do if you need to display this content and make the content's 'box' mobile-friendly (responsive)?

Fortunately, Rock already has all of the tools you need; you just need to learn how to use them! This recipe will show you how to create a simple iFrame embed

To accomplish embedding iFramed content we're going to use a Bootstrap column and some CSS, which are both modern web technologies that Rock supports.
We're essentially defining multiple 'boxes' with different properties and then putting one box inside of another so that each box obeys it's rules (properties).

How To

1. Define your CSS

In the Pre-HTML of the block where you will be embedding the iFrame, add two CSS Classes, container-responsive and responsive-iframe as definitions we will use later. You can name them something different, but we need both. Rock has multiple blocks that can use the Pre-HTML option, which is under the Block Properties > Advanced Settings tab

Define a container-responsive class

This class' primary purpose is to use the padding-top style to define a 16:9 aspect ratio

.container-responsive {
  postion: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

First we define the class name as container-responsive. You can substitute a different name if you'd like (you just need to reference it later). Then we set the position property for an element to be (relative) to it's normal position. After that we set the overflow property for an element to 'clip' content (hidden) that overflows an element's box. Then we set the width to be (100%( of the element's width. And finally we use the padding-top property to define a ratio (56.25%, which in this case is equivalent to 16:9).

You may need to adjust the percentage based on how your iFrame embeds. This example assumes the content being embedded is 16:9; if your content has a different ratio calculate the appropriate percentage

Define a responsive-iframe class

This class' primary purpose is to use the styles to define the location (top, left, bottom, right) and size (width, height)

.responsive-iframe {  
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

You should not need to adjust these settings

What both classes look like together in your Pre-HTML block property

Note: you must 'wrap' these in a style tag

<style>
.container-responsive {
  postion: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
</style>

2. Build your bootstrap columns, referencing the CSS classes

Use Bootstrap 3's rows and columns technique, which Rock supports

Define a row

<div class="row">

Define a column

<div class="col-md-12">

Bootstrap 3 columns must total 12 for each row; in this example we only have 1 column

Add a div, referencing the container-responsive class you created earlier

<div class="container-responsive">

Add your iframe embed, referencing the responsive-iframe class you created earlier

<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

src=""

Close out your div's

</div>
</div>
</div>

What the bootstrap columns and iframe embed looks like all together

<div class="row">
  <div class="col-md-12">
    <div class="container-responsive">
      <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
    </div>
  </div>
</div>

Reference

In learning this process, I used the following (if you want to read further):

Screenshots

/GetImage.ashx?guid=0bbc9459-49ed-47ee-8e00-de20df018001
/GetImage.ashx?guid=d60db65a-bbcd-4f28-9a12-f6592a133ac1