+1-888-365-2779
Try Now

YouTube Playlist Display

by Duncan
Publication date:
Dec 23, 2009, 13:23 PM

Version:
1.0

Compatibility:
  • Sitefinity 3.7

Price: $ 0
Item Description: "YouTube Playlist Display" is a pretty neat control that I just finished working on and would like to share it with everyone (I did not see another YouTube control in the Marketplace). What it does is to utilize the YouTube API to connect to your YouTube account and display any or all of your YouTube playlists.

Beyond that it also utilizes some Sitefinity functionality like my other controls at the Marketplace.

1) The control is a CacheSubstitutionUserControl and will refresh on a cached page.
2) The control utilizes the Sitefinity GenericContent Control so, that you can add custom content above the video list (Like a heading, YouTube logo or whatever you need).
3) Additionally, the control customizes the display of your YouTube videos. I was not able to find any widgets or already existing controls out there that can do that (I might not have looked hard enough so don't take my word for that).

What you need:
1) You are going to need a YouTube account
2) You are going to need a YouTube Developer Key (Information on this is available here.)
3) You are going to need to create a playlist inside your YouTube account and add some videos to it.
4) You need to add the YouTube API DLLs to the Bin folder of your project. I have included the three DLLs in the download file.
5) You will need to upload the control through the Sitefinity administration area. (This should add the web.config entries for you)

Using the control:
Once you have done all the above you are almost ready to go.

If you take a look at the YouTubeVideoList.ascx.cs file, you will notice a number of properties and variables at the top of the code. YOU DO NOT NEED TO MODIFY THE CODE BEHIND FILE FOR IT TO WORK, but if you want to make it easier when adding the control to a page then hard code the following fields (under the "fields" region at the top of the code):

_youtubeID = Your username for your YouTube account
_developerID = The developer key I mentioned above
_applicationName = Whatever you want to call your app

Control Properties:
YouTubePlaylists is the most important property here. You will need to set this property when editing the control in Sitefinity. It is the YouTube playlist that you want to display videos for. You will not see any videos until you set this property!

The control accepts multiple playlists. All you need to do is separate each playlist name with a ";" The control will then add each playlist to the list of videos.

DatalistRepeatColumns and VideosPerPage are self explanatory.

ReverseOrder allows you to flip the playlist videos in reverse order. By default (don't ask me why) YouTube displays your playlists with the oldest video first and the newest last. If you limit the control to 10 videos per page and do not reverse the order, you will never see any new videos you add to your playlist. But I have left the option up to you in the form of this property.

Conclusion:
And that's it! Pretty simple control but adds some really cool YouTube videos to your website! You can see the control in action here.

ENJOY!

More:
The control also has some DIV tags where i apply CSS styles to. It is up to you whether you want to use this functionality. Here are my styles, if anyone wants to use them:

#YouTubeBox table {} 
#YouTubeBox td { 
    vertical-aligntop
    text-aligncenter
#YouTubeBox #VideoImage { 
    height100px
#YouTubeBox #VideoImage img { 
    border1px solid #E0E0E0
#YouTubeBox #VideoName { 
    margin-right13px
    margin-left13px
    margin-top5px
    margin-bottom5px
    font-size10px