Crossfit Movement and Exercise Videos Widget

Our CrossFit website needed a little link to the list of CrossFit’s exercise and movement demos, but the list on CrossFit.com’s main site directly links to video files and the page contains videos about exercises that a normal CrossFit newb would not encounter, like CrossFit Combat or Football drills.  Video files are nice because you can download them but they often present a problem for those who do not have the proper media player.

I made this little CrossFit Movement Videos widget to address both problems.  The widget only includes videos of exercises that people do in regular CrossFit and it links directly to Youtube, loading up the video right in the widget box.  The widget uses the Shadowbox script to open up the list in an iframe right on your page.  Here is a demo, if you click it:

I have kept the coloring of the list boring and neutral so that it wouldn’t clash with anybody’s color scheme.  For the foreground color of the image, you have three images to choose: black, white,  or gray.  Just copy and paste the code below as HTML into the place where you want the widget to appear:

	<div id="movement_videos"><link rel="stylesheet" type="text/css" href="http://www.sitegonebad.com/s/shadowbox.css"><script type="text/javascript" src="http://www.sitegonebad.com/s/shadowboox.js"></script><script type="text/javascript">Shadowboox.init();</script><a href="http://www.sitegonebad.com/s/movements.html" rel="shadowbox;width=700;height=450"><img src="http://www.sitegonebad.com/s/movement_black.png" /></a></div>
	<div id="movement_videos"><link rel="stylesheet" type="text/css" href="http://www.sitegonebad.com/s/shadowbox.css"><script type="text/javascript" src="http://www.sitegonebad.com/s/shadowboox.js"></script><script type="text/javascript">Shadowboox.init();</script><a href="http://www.sitegonebad.com/s/movements.html" rel="shadowbox;width=700;height=450"><img src="http://www.sitegonebad.com/s/movement_white.png" /></a></div>
	<div id="movement_videos"><link rel="stylesheet" type="text/css" href="http://www.sitegonebad.com/s/shadowbox.css"><script type="text/javascript" src="http://www.sitegonebad.com/s/shadowboox.js"></script><script type="text/javascript">Shadowboox.init();</script><a href="http://www.sitegonebad.com/s/movements.html" rel="shadowbox;width=700;height=450"><img src="http://www.sitegonebad.com/s/movement_gray.png" /></a></div>

In WordPress, the simplest way is to go to “Appearance -> Widgets” then drag a new “Text” widget where you want it and then paste in one of the blocks of code. If you want it centered the easiest way is to put it between <center>...</center> tags.

In Joomla or Drupal you might need to click on the option to allow Javascript in that page.

If you have any suggestions for different videos or more exercise movements then please comment below.