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.
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.