Friday, March 28, 2014

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!

Wednesday, March 26, 2014

Understanding Screen Colors and Accessibility

There are lots of accessibility myths out there, involving which color combinations are and aren't accessible: It's all about the level of contrast between the colors and the size of the text. WebAIM, a site which provides web accessibility solutions, has a Color Contrast checker available for anyone to use to check your text's accessibility.

To use this tool, you need to understand a little about how colors can be named on a computer. Because of the way monitors show colors, colors are identified by the amount of Red, Blue, and Green in the color (RGB color). The value of each color varies from 0 (none) to 255 (as much as possible). Instead of writing out R: 255, B: 255 G: 255 (255,255,255) for white, some programs show this in something called hex code. Every color is coded in a 6 character combination with values from 0-9 and A-F - the first two characters are the Red, the next two are the Green, and the final two are the Blue. White is #FFFFFF and Black is #000000. Red would be #FF0000.

This would be simple enough (grab the RGB hex codes, you need and type them in the tool to compare) except that not all programs will give you the hex code - some will only give you the RGB values from 0 to 255, which is sometimes referred to as decimal code. If that happens to you (PowerPoint, for example, will give you decimal code under advanced color options but not the hex code) then you can use another tool to convert the colors to the code you need.

Here's an online tool that lets you put in RGB decimal values, or RGB hex values, or select a color by sight and gives you all the information about the color. Then you can take the hex codes to the WebAIM site to check color contrast for accessibility.