Customizing the Appearance of an Embedded YouTube Video

As you may know, UA has a YouTube channel with some really nice video content that you may be interested in linking to or embedding on your website.  If you are interested in embedding YouTube video, there are a number of parameters that you can modify to customize the way the YouTube video appears within the context of your web page.

The first step in embedding a YouTube video is to point your browser to the YouTube page for the video you wish to embed.  On the right side, under the information about the video, you will see two fields, one for URL and one for Embed.  If you wanted the URL to make a link to the video, you would choose URL and copy and paste the URL code to make your link.

For the purposes of this post, we are interested in the Embed code.  If you just want to use the default parameters for your embed, simply click the box next to the word Embed, at which time the code will become highlighted/selected, copy the code, and then paste it into the markup for your website wherever you want to embed the video content.

Customize YouTube

But what if you wanted to customize the look of this embed.  For example, maybe you don’t want the title and rating information that YouTube displays by default on your embedded video.  Many aspects of the video’s appearance can be modified through a combination of the “Customize” interface on YouTube and within the embed code itself.

You might notice, however, that when you click that code (or click the blue “gear” icon), some information will appear below the code that allows you to check or uncheck various boxes such as “Include related videos” and “Show border.”  In addition to these checkboxes, you’ll also have the ability to choose from various color combinations for the border and select length/width dimensions for your video.

As with most social media tools, it’s likely that the options on this customization panel will change over time, but that’s the kind of thing you can do within the YouTube video page itself for now.

The other way to modify the settings of the YouTube video is by adding and modifying parameters associated with the object and embed tags in the markup of your web page.

For instance, if you do not want title and rating information to show on the movie, you would add &showinfo=0 to the YouTube URL:

Notice in this sample code that rel=0 and border=1 have already been added based on what we did earlier in the YouTube customization panel.

By embedding the video with these modified parameters, we are able to make the following customizations:

• Our video will have a gray border (this happens to be the default when a border is used but if we used one of the other colors a hexadecimal code would be included in the parameters)
• Related videos will not be offered at the end of the video
• The title and rating will not display at the top of the video

You can see an example of one of these customized videos on a recent post on Bamalog (the UA Undergraduate Admissions blog). Just view source to see the markup used to customize the video.

Note:  I apologize for not putting the full code for the YouTube embed and a sample video within this WebTide post but it turns out that WordPress.com has some problems with displaying these code samples and with rendering the customized YouTube video. These limitations are specific to WordPress.com blogs and do not affect self-hosted WordPress blogs and sites. In fact, the Bamalog example above is in a self-hosted WordPress installation.

New UA Video Newsroom launched

We’re pleased to announce the launch of our new Flash media server and a new interface for viewing video on the UA home page.  This represents a significant advance in both the technology behind our video offerings and the interface with which our users interact with multimedia on the web.  Here are some of the highlights: 

• Our video has been upgraded to use Flash 9 format to maximize quality and compatibility.  Also, the video will appear much larger on the screen than our previous video player. 
• All video is now streaming, which means that as long as our new streaming server is functioning correctly, users shouldn’t observe any buffering, lagging, or any other interference with the video’s playback.  And users may also skip to any point in the video clip and skip between clips without interruption.
• Our primary UA Video Newsroom has been redesigned with a new video player.  This new interactive player includes a sleek new look and a significant new feature – an interactive playlist which contains other videos that users may navigate between and watch.  The playlist includes information about each clip to make it easy for users to identify which clips they’d like to watch.  This playlist is automatically populated with the most recent video clips, and users may select any time period back to 2006 by year or month to see all available videos. 
• The new video player uses Javascript to do browser detection for the correct plug-in at load time.  If the proper version of Flash Player is not found, the user is automatically prompted to download the current version.

This new video player has also been deployed in a singular form on all of our pages with video throughout the UA web site, ensuring maximum quality and compatibility.  We can easily take any video and embed it in any web page on the UA.edu domain and play videos that are appropriate for that site or page.  We anticipate this helping us spread the reach of video offerings and make our web site more interactive. 

So with no further delay, here’s the new UA Video Newsroom: 

http://uanews.ua.edu/video/

Please feel free to explore the video player and share any feedback you may have with us.  And of course let us know if you observe any bugs or issues on your machine, so that we may optimize the player for all users. We feel this is a big step toward making video a prominent and effective communication tool for reaching our audiences online – and more features and functionality are on the way.