by Admin
3. June 2010 04:52
Download Source Code (9.09 kb)
Download Binaries (6.28 kb)
Recently I started created some YouTube videos and wanted to embed them in my ASP.Net web site. YouTube
provides Embed button next to each video and that helps you create HTML code that you can
put on your page. But that would mean that you will have to hard code this HTML on all pages
where you want to embed videos. Also if you want to show some random videos on the pages, then this
approach is not flexible.
I created this ASP.Net server control that allows to embed YouTube videos on any page. The control allows
you to embed videos for which you already have URL or you can configure it to fetch any of the standard
YouTube feeds and then display random video from that feed.
How to use it?
- Download source code of the control and compile it or download pre-compiled binaries of the control.
- Add reference to ByteBlocks.YouTubeWeb assembly in your project.
-
On the page where you want to embed YouTube video, add the following directive at the top of the page.
<%@ Register TagPrefix="ByteBlocks" Assembly="ByteBlocks.YouTubeWeb"
Namespace="ByteBlocks.Web.Control" %>
-
Now add the control on the page.
<ByteBlocks:YouTube id="youTubeVideo" runat="server" Width="480" Height="385"
VideoUrl=""
FeedType="MostRecent" RandomResults="true" />
- And you are all set to show random video from Most Recent video feed from YouTube.
Configurable Properties
- VideoUrl: This property allows you to set URL of the video that needs to be embeded.
- Width: Sets the width of the video player
- Height: Set the height of the videeo player
- FeedType: If you do not want to use a pre-defined video URL, you can pick a standard
feed type. The control will fetch that feed from YouTube and display it based on value set for
RandomResults and IndexToShow. This property is mututally exlcusive
with VideoUrl. If you want the control to fetch standard feed, then do not set any
URL in VideoUrl.
- RandomResults: This property indicates to control to pick a random Video Url from
the list of videos from standard feed type.
- IndexToShow: If you set RandomResults to false, then the control
will fetch the video at this index value. If this index is out of range, then the control picks the
last entry in the feed list.
Under the covers
When you generate HTML code for a video from YouTube, it looks something like as shown below.
<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/XcugLsKDmRs&hl=en_US&fs=1&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/XcugLsKDmRs&hl=en_US&fs=1&rel=0"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="480" height="385"></embed>
</object>
So the control simply renders this HTML on ASP.Net page and uses the control properties to
configure the display accordingly. The important components of this HTML is video ID used with the
video player. I have shown that in bold in snipper above. A video URL looks like as shown below.
http://www.youtube.com/watch?v=Qp9_6ACSWug
Video ID is provided in v query string parameter. The control parses this ID and
replaces it in the URL that is required for URL for video player.
Source Code and Binaries
Attached code is compiled using Visual Studio 2010 and .Net 4.0 framework. If you need code for
earlier versions of Visual Studio, feel free to conttact me.
Subscribe