A Smidgen of Responsive Design for Faculty
by Alan ReganHas 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"
