Torxweb Design Contact Phone
The City of Collinsville did not have an existing website when we were contracted to create this site. We were responsible for every aspect of the site from photographs to content, and the city staff really let us go with the project. Everyone was pleased with the result.
More ...
Retail Attractions is a dynamic business that is constantly evolving. The owner likes to have a fresh look every year or so, and this is the third version we have completed with Retail Attractions. This site incorporates video and a WordPress blog.

More ...

Register   |  Login

Add YouTube Video to DotNetNuke Using Widgets

Posted In: DotNetNuke

Watch this video for demonstration of items discussed here:


YouTube videos have become mainstream and often times users wish to embed their YouTube videos into DotNetNuke to help enhance their web page. One easy way to embed YouTube videos into DotNetNuke is by using the "Embed Widget" available in DNN 5 (verify you are using DotNetNuke 5+ before using code).  The embed widget can be used to embed several different objects including YouTube videos, Adobe Flash objects, Flickr, and others.  If you are wishing to add a video to your website, YouTube is the cheapest and most beneficial method. Not only is it free, but creating a YouTube channel can actually help your search engine marketing campaign and help drive traffic to your website. In order to add a video, you much know the video id of the video being added. Below is a common URL structure for a YouTube page.

http://www.youtube.com/watch?v=_MnPZPhD4kU (Video Introducing DotNetNuke)

For this video, the video id is string following v= querystring or _MnPZPhD4kU. Save the video id as we will use it later. In order to add the embed widget that will be used to display the video, we must add a Text/HTML module to the page as a container for the video. Click on the Edit Text link and change the view to Source or HTML view (according to which editor you are using). In the source mode, add the following code:

Embed YouTube video code:

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

You will notice in this code that the id is set to "EmbedYouTube". If you are using multiple videos on a single page, the id must be changed to a unique id. Do not use the same id for multiple instances on a single page.  You will also notice the Type is set to "YouTube" and the src is our video id of our video. Change the src parameter to your video id to display your video. We have also included the width parameter to set a with of 400 pixel for the object. You can adjust the width parameter to your needs. Below is how your video will look using the embed code above.

What if we want to center our video in the middle of our current pane? We must add some inline CSS styling in order to get the embed widget to display correctly. Below is another code sample, but this time we add a bit of code to center the video in the current pane.

<div style="text-align:center;margin: 0px auto;">
<object id="EmbedYouTube" codetype="dotnetnuke/client" codebase="EmbedWidget" declare="declare">
    <param name="Type" value="YouTube" />
    <param name="src" value="_MnPZPhD4kU" />
    <param name="width" value="400" />
</object>
</div>

Here is the same video using the embed code:


If we want the video to appear in line with other text that is on the page (floating), then we can add additional code to the widget wrapper to display the YouTube video in our text. Below is an example of using a float right and padding to display the YouTube video on the right side of our text.

Embed YouTube Video Display Inline on Right Code:

<span style="float: right; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 10px;">
<object id="EmbedYouTubeVideo" codetype="dotnetnuke/client" codebase="EmbedWidget" declare="declare">
<param name="Type" value="YouTube">
<param name="src" value="_MnPZPhD4kU">
<param name="width" value="400">
</object></span>

If we wish the video to appear on the left side of the text like this example, then we need to use the embed video inline left code.

Embed YouTube Video Display Inline on Left Code:

<span style="float: left; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 0px;">
<object id="EmbedYouTubeVideo" codetype="dotnetnuke/client" codebase="EmbedWidget" declare="declare">
<param name="Type" value="YouTube">
<param name="src" value="_MnPZPhD4kU">
<param name="width" value="400">
</object></span>

Testimonials

Thank you for all your help and patience with our website. It looks fabulous, and we highly recommend Torxweb to anyone.
- Michelle Hampton
Event Setters

New DotNetNuke Module - SmarterMail


Integra Lawn Service

Torxweb Design has just launched a new website for Integra Lawn Service that provides lawn care services to the Tulsa, Owasso, Skiatook, Sperry, and Collinsville areas of the Tulsa Metro. The site is built on DotNetNuke and is an online portfolio for their Owasso Lawn Care business. Visit the new site to see our recent DotNetNuke based design.