Telerik blogs

Have you ever thought of embedding a YouTube video in the context of a data-bound control? Recently, a client of ours asked for such a demo and this inspired me to create a code-library project that features this scenario and uses RadListView for ASP.NET AJAX as ‘videos host’. Depending on your goal, you can control the player via JavaScript code or you can just embed a static object. In the latter case you will need something like this:

   1: <object width="425" height="344">
   2: <param name="movie" value="http://www.youtube.com/v/QT0e5XqNZdo&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b"></param>
   3: <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
   4: <embed src="http://www.youtube.com/v/QT0e5XqNZdo&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
   5: </object>

In some cases you may need to use the “chromeless” player in order to customize the default appearance and to gain control over some of the YouTube player's functions via JS – this is a bit more tricky because you should cue the video in the onYouTubePlayerReady handler for each separate player. As we know, it is not feasible to evaluate the url directly (via server-side expressions) because you will end up with all players playing the same (last) video. This is why I decided to serialize a basic array to store the item indices along with the corresponding urls. This approach is fast and easy enough so everyone can take advantage of it.

 

screenshot

 


About the Author

Daniel Peichev

is Software Developer at one of Telerik's ASP.NET AJAX teams, where he primarily works on exporting functionality for RadGrid and RadTreeList. Daniel is interested in ASP.NET, Javascript, CSS and the cutting edge Microsoft technologies and products.

Comments

Comments are disabled in preview mode.