Training Tips Weekly

- Welcome to Training Tips Weekly. I'm Chris Mattia, and I'm here to help you enhance the design, creation, and delivery of your instructional materials. Now two of the common themes that we've been exploring in this series thus far have been instructional media production, and embracing mobile devices. This week, we're going to begin addressing the use of media embedded on websites that are viewed on mobile devices. Media hosting sites, such as YouTube, Vimeo, and many others, provide an amazing service to host and deliver our content with.

They also provide the tools to allow users to embed that content in other websites. For instance, on YouTube, you click the share icon, and then scroll down and click the Embed tab, then copy this little bit of html code for what's called an iFrame. An iFrame, or inline frame, can display content from one site into the middle of another site's page. Then, if you go to your website code editor, I'm using Brackets, which is available for free for both Windows and Mac at brackets.io, and then paste in the iFrame embed code that you just copied into the appropriate place.

When you preview your page, that little bit of iFrame code reaches out to that video on YouTube, and displays it right on your page. One of the pain points about iFrames that you need to be aware of though, is that they tend to break pages with responsive layouts. Okay, that sounds like a lot of bad news mixed with jargon. So let me show you what I'm talking about. Here I have a page called "responsive.html", where I've pasted in the iFrame embed code from several different sources.

Including SoundCloud, YouTube, and Vimeo. If I preview this page in my browser, everything looks great. But the problem arises when the size of the browser windows begins to shrink. If we're looking at this page on either a tablet or a mobile phone, then you can see that some of this media is not displaying properly. The SoundCloud media is adjusting automatically as the browser window shrinks. The SoundCloud iFrame has been coded to be responsive to the size of the viewport, or a device that it's being displayed on.

So it scales gracefully with the window. Where the others bleed off the edge of the screen. If we don't do anything else, then this would be the first impression that many of your learners would have of your page, since they will most likely see your page on their mobile phones first. And that's something that we just have to fix. But don't despair, because I found a really great site. And it's called Embed Responsively. Before we look at how to use this site, I want to click on the "About" page, and give a shout out to the developers, Theirry, Anders, and Niklaus, and the site's creator Jeff Hobbs.

Who you can find on Twitter at jeffehobbs. The site works with either the URL of the original content, or an existing iFrame's code. Let's start with the URL of a video on YouTube. Navigate to a YouTube video that you've uploaded. And then, copy the URL. If you'd like to learn how to set up your own YouTube channel, and upload videos to it, then check out Teaching Techniques: Blended Learning.

Then go to embedresponsively.com, and make sure that you're on the YouTube tab. Select the URL field and paste in your address. Then click the Embed link. The site then figures out all of the custom CSS code that you need to make this particular movie scale responsively for your own site. A preview of the movie and the new code appears below. Select all of the new code, and copy it to your clipboard.

Then, go back over to your code editor. I'm going to scroll down on the page to just below where my current YouTube video is posted, and I'm going to click onto a new blank line. It's a good idea to always paste your code onto a new line, instead of directly overriding your old code, in case something doesn't go right. Okay, let's take a quick look at this code. There's an opening style tag, and then a whole bunch of CSS, which controls the look of this iFrame code.

Then you'll find a div tag, which is just a container that all of this CSS is going to act on. Then we have our iFrame code itself, with the source attribute, which contains the URL of the piece of media that we want to embed. Here's today's bonus tip, when YouTube videos are embedded, they default to showing related videos automatically when the video stops playing. Now this is great for YouTube, but it may break the flow for your learners, as they work through your materials.

To fix this, at the end of the URL, just before the closing quote, enter in the code ?rel=0. This is called a URL parameter. And it tells YouTube to not display related videos. If you want to force your video to automatically display closed captions, then to add an additional URL parameter, add an & and then enter in cc_load_policy=1.

Okay, let's look at one more example before we preview this. I'll scroll down in my code a little bit further, and I'll copy this iFrame code for this video that's generated from Vimeo. Then we'll go back to Embed Responsively, and click on the Vimeo tab. Here, you can see that this tool is looking for the Vimeo URL, not the iFrame code that we have copied. Therefore, let's go over to the Generic iFrame tab.

And I'll paste my code into there. This time, when you click the embed button, once again, the new code is generated for me, that I can then copy, and paste onto my page. Now when I preview this page, and scroll down a little bit to the YouTube video section, we can see the two YouTube versions. Here's the first version that we started with, and then here's the responsive version.

If I start to reduce the size of the window, you can see that the second video is now responding to this change, and is automatically scaling down. If I play the scaled down version, you can see that the captions are automatically appearing. And when the video ends, no related links appear. If I scroll down further to the Vimeo section, we can see that the second movie is now responsive as well. The last step would be to go through your code, and get rid of the non-responsive iFrames.

If you're new to html, or would like to learn more about iFrames and CSS, then I'd encourage you to go check out HTML for Educators, where I'll walk you through everything you need to know. Well that's all for this week. If you have a topic that you'd like me to cover, reach out to me on Twitter @csmattia, or here on Linkedin. Then be sure to tune in to next week's episode of Training Tips Weekly, where we'll look at another way to enhance the design, creation, and delivery of your instructional materials.