Simple Code Hack to Avoid Media Overlap

A Smidgen of Responsive Design for Faculty

by Alan Regan

Has this ever happened to you? You've embedded media in a blog, web page, or learning management system that has a right column, and your media overlaps the site's right column?

The reason? Your media is wider than the space available. Some web pages will adjust and push the right column, others will overlap like the above image shows.

In the event that you have access to modify the HTML code with your embedded media, a simple coding hack may be able to help. With one "style" addition, you can ask the page to please not display the media (image, video, etc.) beyond the limits of its content column or container.

The Code To Add: style="max-width: 100%;"

Here is an example using YouTube iframe embed code.

BEFORE

<iframe width="560" height="315" src="//www.youtube.com/embed/zpGcjQHPpTc" frameborder="0" allowfullscreen=""></iframe>

AFTER

<iframe width="560" height="315" src="//www.youtube.com/embed/zpGcjQHPpTc" frameborder="0" allowfullscreen="" style="max-width: 100%;" ></iframe>

Give it a try! I hope this will help your media stay within the bounds of your blog post, column, or frame. Works great in Sakai! If only we could convince YouTube and other media sites to add this simple code to the embed process by default...

Resources for the Tech-Curious:

• Article: "Responsive Web Design"
• Detailed Code: "Responsive Videos"

How to embed a YouTube video on Courses/Sakai

By Alan Regan

How to Embed a YouTube Video in the Forums of Courses (powered by Sakai)

YouTube is a resource for both entertainment and education. The videos can contain helpful, controversial, and thought-provoking content. So, how do you post a YouTube video within the Forums tool of Courses/Sakai?

Instructions:

YouTube.com

1. Visit http://www.youtube.com
2. Find a video you want to share
3. Click "Share" below the video
4. Click "Embed"
5. Check the box for "Use HTTPS"
6. Check the box for "Use old embed code"
7. Copy the code

Forums tool of Courses (powered by Sakai)

1. Log into http://courses.pepperdine.edu by clicking "Pepperdine Login" and entering your NetworkID and password
2. Go to the course or project site by clicking the tab or clicking its name in the "All My Sites" tab
3. Click Forums in the left menu
4. Click the desired topic
5. Click "Start a New Conversation" or reply to an existing message
6. Enter the message you want to say
7. Click "Source"
8. Place your cursor where you want the video to display
9. Paste the code
10. Click "Source" again (very important!)
11. Click "Post"

NOTE: Embedded videos will be viewable by users with a PC or Mac laptop running the latest Adobe Flash Player add-on for your web browser. iPad and iPhone users may not see the video. We recommend that you embed and provide the link to the source video, too.