No Old Embed Code, No Problem

Videos on YouTube have a handy Share button to let you disseminate them to anyone in a variety of ways using FaceBook, Twitter, email, and many other social media services. One of those options is embedding the video. Embedding videos in HTML pages is a popular, seamless method of integrating them directly into your content. YouTube's Share button will generate this code using IFrame tags. IFrame tags are simple to add within the code of any HTML page, but they may present a problem when used in pages loaded into some Learning Management System (LMSs) coupled with browser incompatibilities. For instance, IFrame tags can cause display areas to be truncated to the point of being unviewable when using the Blackboard Learn LMS in the Firefox browser.

The key to embedding videos so they will display correctly in IFrame-incompatible systems may be to use what is called the Old Embed Code. This option is provided in YouTube through a check box labeled Use Old Embed Code. However, there are some videos that do not have this option.

Fortunately, there is a free tool called the Valid XHTML YouTube Embed Code Generator, which will generate the Old Embed Code. They also have a tool for videos from Vimeo. Start by copying and pasting the URL from the video you want to embed. The tool has options for specifying:

• Video dimensions
• Alignment
• Menu and border color
• Looping and auto play functions
• Full screen availability
• And more

When finished, click the Generate Code button. Copy and paste the code into your web page, then sit back and enjoy some videos!

The LMS, IE, and Quirks Mode

For the more advanced user of WebCT Vista, Blackboard Learn 9, Angel, etc., who uses web technologies to design rich, visually striking, interactive learning content, there is a perpetual thorn in the side: quirks mode. What is quirks mode? In short, any time the doctype code on an html page header is not done properly (and the first thing the browser sees), most web browsers go into quirks mode to try to compensate for a web page that seems broken. Usually the web browser renders the page as an older version of that browser.

The problem? Even if your html pages are spot-on perfect and standards compliant, WebCT, Blackboard, etc., add a bunch of html and JavaScript to the top of your pages when they serve them up. This makes the browser think the pages are broken, and it goes into quirks mode to try to compensate.

If you use html to create course content to upload into your online course, you’ve probably seen some of the problems caused by this, even if you didn’t know the cause. Most of the problems are caused in Internet Explorer, which renders as IE 5.5 or 6. So any html page you create to upload into an LMS system must be designed to work in IE5.5 or 6, or it will break for your students, even if they are on IE 8 or 10.

For more information on what breaks in different browsers I quirks mode, have a look at quirksmode.org’s excellent guide. It could lead you to the cause of the persistent, mysterious, illogical html problem you’ve been having in your online course:

http://www.quirksmode.org/css/quirksmode.html