Written by:Will
1/21/2009 

Widgets have been called any things, but the main thing to remember is that a widget is just content that is imported from another place.  The "place" could be on your own site, or in the case of some videos, YouTube.  That is what we will focus on this time.

DotNetNuke 5 has an embed widget that makes it easy to embed many common objects such as: YouTube videos, Google Analytics code, Flash objects, Flickr, WidgetBox, and Disqus.  I was very surprised to not see Silverlight in the list of default embed types.  I was only a little surprised to not see Quantcast as well.

Before you choose to embed a YouTube video, you need to first find the video id number.  This is easily found on the video page on YouTube.

Every video has the id in the URL provided.  Here is the URL from the previous screen shot.  You will quickly notice the video id in the querystring.  Keep that id number for later (_y36fG2Oba0).

http://www.youtube.com/watch?v=_y36fG2Oba0

Now, you need to login to the DNN website were you want the video to be embeded into.  Add a Text/HTML Module to any page, or choose an existing module.  We will want to click "Edit Text" as if we were going to make any other textual change.  You will then want to make sure you are working with the source, but I prefer to use the normal textbox view.

Notice in the screen shot that I selected the HTML view option.  I do this because if you leave this at the default of Text, DNN will replace all line breaks with BR tags.  When you are writing HTML, this will have very ill side effects.

Now, we need to include a small snippet of code for the embed widget.  This widget code similar to any other DNN widget.  Here is the example of the code I am using for this blog entry.

<object id="EmbedYouTube" codetype="dotnetnuke/client" codebase="EmbedWidget" declare="declare">
    <param name="Type" value="YouTube" />
    <param name="src" value="_y36fG2Oba0" />
</object>

Notice that the codebase value is "EmbedWidget", and the two parameters.  The first parameter is required anytime you use the EmbedWidget.  It defines the type of widget that will be embeded into the page.  In this case, the value is "YouTube" to specify that we are embedding a YouTube video.  Finally, we need to tell the EmbedWidget which video we want to embed.  This is where the "Src" parameter comes into play.

Once the parameters are filled, update the text module, and view the page.  You should see your video ready to play.

That's it!  Incredibly simple, right? 

Here is the previous code snippet with comments added to it so that it better explains how the parameters are used.

<object id="EmbedYouTube" codetype="dotnetnuke/client" codebase="EmbedWidget" declare="declare">
    <!-- (required) Type: The name of the Embed widget to use & determines the name of folder/file to look for it at -->
    <!-- DNN:       ~/Resources/Widgets/DNN/EmbedWidgetResources/[Type]/[Type].snippet.htm -->
    <!-- Non-DNN:   ~/Resources/Widgets/User/[Publisher]/EmbedWidgetResources/[Type]/[Type].snippet.htm -->
    <param name="Type" value="YouTube" />
    <!-- (optional) MultiValueDelimiter: Use if you want to specify a new delimeter other than a semi-colon -->
    <param name="MultiValueDelimiter" value=";" />
    <!-- (optional) Publisher: Only necessary for non-DNN Embed snippets -->
    <!-- When used, this determines the folder path to look for the snippets in: -->
    <!-- ~/Resources/Widgets/User/[Publisher]/EmbedWidgetResources/[Type]/[Type].snippet.htm -->
    <!--param name="Publisher" value="" /-->
    <!-- Parameters Specific to YouTube Widget -->
    <param name="src" value="_y36fG2Oba0" />
</object>

Technorati Tags: DNN, DotNetNuke, DNN Blog, How To, Widgets, 5.00.00

Copyright ©2009 Will Strohl

TrackbackPrint

Tags:

Categories:DotNetNuke

Location: BlogsThe Mighty Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel