Your YouTube Playlist

Let’s first observe some YouTube specific functionality. YouTube users can create playlists that contain YouTube items. This playlist may be shared on other websites by embedding specific html code in a website page. Once your playlist has been created and populated on YouTube, you can find the YouTube playlist embed code by selecting the Share button (as illustrated in the figure below).

Clicking on this Share button on your YouTube playlist page will reveal 2 relevant fields specific to this playlist. The URL address of the playlist (first field in screenshot below) and the Embed code for the playlist (second field in the screenshot).

If we copy/paste the second (Embed code) field in a text editor, we should see something like the code illustrated below:

<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/p/5FA6D28ABAA5D4AD?hl=en_US&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/p/5FA6D28ABAA5D4AD?hl=en_US&fs=1" type="application/x-shockwave-flash" width="480" height="385" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

I have underlined the playlist code which as you can see is repeated twice in the embed string. This is the only piece of information that changes when we select a different playlist to embed. We can also see this playlist code used in the URL field (at the end of the URL).

The Concept

Based on the previous observations we have made, the concept is to create 2 CB Fields. A CB text field that will contain the playlist code we identified earlier (the piece I underlined twice in the Embed code) and a CB Delimiter field that will contain the HTML embed code with our first CB field used as a field substitution (twice).

The Implementation

The CB YouTube Playlist field we created is a text field-type that we have chosen not to appear on front-end profile display (and will not appear during registration either). We have placed it in our Contact Info. tab (although we could have placed it on any other CB Tan we have on our website). Thus, this field can only be accessed when editing a profile. The field name is cb_youtubeplaylist.

The CB YouTube Player field we created is a delimiter field-type that contains the HTML embed code for the YouTube player but we have used the [cb_youtubeplaylist] field substitution to grab the playlist code that the user profile owner has placed in the previously created CB text field-type. The actual HTML code contents of this delimiter field is:

<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,32,18" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" height="308" width="384">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/p/[cb_youtubeplaylist]?hl=en_US&fs=1" />
<embed height="308" width="384" src="http://www.youtube.com/p/[cb_youtubeplaylist]?hl=en_US&fs=1" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash"></embed>
</object>

Please note that we have proportionally scaled down the original dimensions of the playlist viewer from width="480" height="385" to height="308" width="384" in order for the viewer to fit in the user profile position we have chosen (in our case we have placed the delimiter field in the User Status tab).

The Results

The end results noticed by the profile users are illustrated in the following screenshots. The first screenshot shows our YouTube Playlist Code field (in user profile edit mode) along with a nice tooltip soliciting the playlist code the user would like to share.

The second screenshot shows the end result viewed by any authorized user profile viewer.

Conclusions

We have seen how a CB Delimiter field can be used to provision a YouTube playlist player in our user profiles. Users can specify their own favorite playlist by populating their playlist code field.