, , , , , , , , , ,

So you found this really cool video you want to share on your blog, but how do you embed it rather than just linking to it?  Well, if you found it on YouTube or one of the other following shortcode-supported sources, the process is simple and straightforward:

But what if you find it on another non-supported site – for this example, the main CNN website.  It gives you an “embed” code by clicking the <> symbol at the top of the video, but it won’t work.  None of the shortcodes will work either.

I wish I could tell you there is a simple way.  I can’t tell you that, but I will tell you how it can be done if you don’t mind taking a few extra steps.

First of all, you’ll want to save the following snippet as a template you can refer to later (you’ll need to delete the asterisk after the first square bracket – it was necessary to include so it displays on this page as text rather than WordPress converting it to a shortcode statement):

[*gigya src="SOURCEFILE" flashvars="VARIABLES" width="416" height=
"374" quality="high" wmode="transparent" allowFullScreen="true"]

You can change the width and height to match that of the source video as well if you like depending on available space on your blog page, but the only thing we need to replace are the two variables in all caps:  SOURCEFILE and VARIABLES.  So where do we find these.

Go to your CNN video page (or whatever site your video is on) and instead of clicking on one of the share buttons, right click anywhere on the page except on the video (you will only get flash options if you click on the video).  Then in the options dialogue that pops up click “View Page Source.”  [Note: In Internet Explorer the menu item simply says “View Source”].  You’ll get a page full of code, which may or may not make any sense to you.  Don’t worry about that.  Your just going to scroll down the page a bit and look for a block of code that looks like this (delete asterisk here as well):

<*embed src="http://i.cdn.turner.com/cnn/.element/apps/cvp/3.0
waitress-stiffed.wabc" type="application/x-shockwave-flash" 
width="768" height="432" wmode="transparent" bgcolor="
\#000000" allowfullscreen="true" allowscriptaccess="always">

Obviously, the text won’t be color highlighted.  I added the highlights to separate the two sets of variables we are looking for.  The text highlighted in red you will copy and paste in place of the SOURCEFILE text in your template.  The text highlighted in blue you will copy and paste in place of the VARIABLES text in your template.  You final piece of code should look like this (again delete the asterisk after the first square bracket):

[*gigya src="http://i.cdn.turner.com/cnn/.element/apps/cvp/
3.0/swf/cnn_embed_2x_container.swf" flashvars="site=cnn
gay-marine-waitress-stiffed.wabc" width="416" height="374" 
quality="high" wmode="transparent" allowFullScreen="true"]

Now you can copy that block of text and paste it into your WordPress Post or Page editor.  Make sure you paste in the “Text” tab, not the “Visual” tab.  Now click either the Publish or Preview button and the video should appear when the page is generated.

Here is an example of the above code in action: