Listen up, Kossacks!
You love Jon Stewart. You love Stephen Colbert. So do I.
A few Kossacks have asked me how to embed videos from The Daily Show and The Colbert Report. It's actually pretty easy, so I thought I'd write up a little Embedding Comedy Central Videos for Dummies guide.
This diary is a step-by-step guide for embedding a specific video clip from The Daily Show. See the Summary For Embedding Comedy Central Videos at the end for a quick recap of how to embed any Comedy Central video into DKos diaries and comments.
Let's take the following video from the May 11, 2009 episode of The Daily Show:
Now, how do we embed this video into a DKos diary?
First, go ahead and copy the code in the Embed box from Comedy Central and paste it into a DKos diary.
<table style="font:11px arial; color:#333; background-color:#f5f5f5" cellpadding="0" cellspacing="0" width="360" height="353"><tbody><tr style="background-color:#e5e5e5" valign="middle"><td style="padding:2px 1px 0px 5px;"><a target="_blank" style="color:#333; text-decoration:none; font-weight:bold;" href="http://www.thedailyshow.com/">The Daily Show With Jon Stewart</a></td><td style="padding:2px 5px 0px 5px; text-align:right; font-weight:bold;">M - Th 11p / 10c</td></tr><tr style="height:14px;" valign="middle"><td style="padding:2px 1px 0px 5px;" colspan="2"><a target="_blank" style="color:#333; text-decoration:none; font-weight:bold;" href="http://www.thedailyshow.com/video/index.jhtml?videoId=226623&title=excuse-me-your-dick-is-
out">Excuse Me Your Dick Is Out</a></td></tr><tr style="height:14px; background-color:#353535" valign="middle"><td colspan="2" style="padding:2px 5px 0px 5px; width:360px; overflow:hidden; text-align:right"><a target="_blank" style="color:#96deff; text-decoration:none; font-weight:bold;" href="http://www.thedailyshow.com/">thedailyshow.com</a></td></tr><tr valign="middle"><td style="padding:0px;" colspan="2"><embed style="display:block" src="http://media.mtvnservices.com/mgid:cms:item:comedycentral.com:226623" width="360" height="301" type="application/x-shockwave-flash" wmode="window" allowFullscreen="true" flashvars="autoPlay=false" allowscriptaccess="always" allownetworking="all" bgcolor="#000000"></embed></td></tr><tr style="height:18px;" valign="middle"><td style="padding:0px;" colspan="2"><table style="margin:0px; text-align:center" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr valign="middle"><td style="padding:3px; width:33%;"><a target="_blank" style="font:10px arial; color:#333; text-decoration:none;" href="http://www.thedailyshow.com/full-episodes/index.jhtml">Daily Show<br/> Full Episodes</a></td><td style="padding:3px; width:33%;"><a target="_blank" style="font:10px arial; color:#333; text-decoration:none;" href="http://www.thedailyshow.com/tagSearchResults.jhtml?term=Clusterf%23%40k+to+the+Poor+House">
Economic Crisis</a></td><td style="padding:3px; width:33%;"><a target="_blank" style="font:10px arial; color:#333; text-decoration:none;" href="http://www.thedailyshow.com/tagSearchResults.jhtml?term=Republicans">Political Humor</a></td></tr></table></td></tr></tbody></
table>
Whoa! It's a beast! More importantly, it doesn't work. As with other non-YouTube sources, you can't just copy the full code from Comedy Central into a diary. What we want to do is build an HTML code of our own to get the damn video to run properly.
So how do we get the code that we want from that monster?
STEP #1: The Source
The first place to look in the giant monster code is where it says "src", which means source. You'll see it in the middle of the code, and it looks like this:
src="http://media.mtvnservices.com/mgid:cms:item:comedycentral.com:226623"
This little code snippet is what Comedy Central uses for its Flash video players (and that's why you'll see the brief Comedy Central plug before the video starts running). It will also be the first piece to the puzzle.
STEP #2: The Video ID
Now, notice the 6-digit number (226623) at the end of the code snippet from Step #1. You might also notice the same number in the URL of the webpage. That number is the Video ID, the number that identifies the specific video you want. The Video ID 226623 specifies the video clip from the May 11 episode of The Daily Show that you see above.
When you look up videos on Comedy Central, you will see the Video ID in the URL. For this video clip, the URL looks like this:
http://www.thedailyshow.com/video/index.jhtml?videoId=226623&title=excuse-me-your-dick-is-out
The Video ID, shown in bold, will be our second piece to the puzzle.
Please note that the Video ID does NOT include the ampersand. The Video ID contains NUMBERS ONLY. The "&" symbol is just there to specify other components of the URL (like the title of the video). We don't need those other things. We just need the Video ID.
Also, please note that the Video IDs for Comedy Central are not always 6 digits long. The Video IDs from Reno 911 have just 5 digits.
STEP #3: The Video Player
Go back to the giant monster code from Comedy Central. Now that you've got the puzzle pieces for the video source and the Video ID, you're gonna want to specify some things about the actual video player. Namely, the width, the height, and the full-screen option.
Oh look! The giant monster code from Comedy Central has got just what we need. Starting with the "src" code snippet from Step #1, copy and paste the following text into the diary:
src="http://media.mtvnservices.com/mgid:cms:item:comedycentral.com:226623" width="360" height="301" type="application/x-shockwave-flash" wmode="window" allowFullscreen="true" flashvars="autoPlay=false" allowscriptaccess="always" allownetworking="all"
This is the code we want for the May 11, 2009 video clip from the Daily Show.
You can fiddle around with the width and height of the video player if you want. However, this is a very important note: Never, EVER fiddle with the "autoPlay=false" item. Autoplays are extremely annoying, and if you include a video on autoplay in a comment, you can't remove it without deleting the entire diary.
Now, to embed the video!
STEP #4: Embedding the Video
This is the final and easiest step. All you have to do is take the complete code from Step 3 and add the embed tag. For you non-tech-savvy Kossacks, the embed tag works just like the bold or Italic tag does. Here's what you do:
Open the embed tag by adding <embed at the very beginning of the code. Leave a space between <embed and src. Then, close the loop by adding ></embed> at the END of the code.
Your final code should look like this:
<embed src="http://media.mtvnservices.com/mgid:cms:item:comedycentral.com:226623" width="360" height="301" type="application/x-shockwave-flash" wmode="window" allowFullscreen="true" flashvars="autoPlay=false" allowscriptaccess="always" allownetworking="all"></embed>
And with that, your video should be good to go!
Also, please note that in the HTML codes above, you may use either quotation marks or apostrophes for each video specification. Either one works (i.e. width="360" and width='360' are the same). I prefer quotation marks because they are easier to see.
________________________________________________________________________
Summary For Embedding Comedy Central Videos
- For all Comedy Central videos, copy and paste the following text into the diary:
<embed src="http://media.mtvnservices.com/mgid:cms:item:comedycentral.com:INSERT VIDEO ID HERE" width="360" height="301" type="application/x-shockwave-flash" wmode="window" allowFullscreen="true" flashvars="autoPlay=false" allowscriptaccess="always" allownetworking="all"></embed>
- Find the Video ID (usually a 5- or 6-digit number) in the URL address for the video and place it into the code where specified above.
________________________________________________________________________
For help on how to embed MSNBC videos, check out this diary from wader.
Cheers, and happy video huntin'!