Getting ready

You will need the jQuery 1.4.2 and the yt.jQuery plug in

How to do it...

1. Create a Chunk element named ytVideoPlay to store your markup. This code will include an anchor element with an href, alt, class, and title attribute. The href value will be the link to the video on YouTube. Example code:

<a href=”http://youtube.com/watch?v=xtjgY-z9QZ8” class=”video_link” alt=”MODx Framework” title=”MODx Framework”>MODx Framework</a>

2. Create a Chunk Element named ytVideoScripts to store your scripts. You will need to load in this order:

a. jQuery 1.3.2

b. SWFObject

c. Jquery.ytchromeless.js

3. Include the code to load the chromeless player when the document is ready. Example code:

<script>

$(function(){$(‘.video_link’).ytchromeless()});

</script>

4. Create a Resource and include both of the Chunk Elements created. Example code:

How it works...

Google YouTube makes it easy to share their videos on your site, by providing you with an embed code. Using the object embed code provided by YouTube could potentially hurt your rankings. As an alternative, you can use the YouTube Data API and some Javascript to show videos on your site in an accessible way.

Our videos are anchor elements that have href attributes with values of the link on YouTube. When the page loads the script will render into a swf object.

There's more...

Accommodating for mobile browsers requires a little extra code. We detect for Javascript enabled mobile browsers and include the object embed code as an alternative snippet. Now even mobile browsers can watch our videos.