Adding a Custom YouTube Player to your Website

YouTube is a popular video sharing website. Users can upload, share and watch videos. One of the great features that YouTube offers is an array of APIs so users can quickly and easily add a YouTube player to their website or blog. This article will focus on creating and adding a custom YouTube player to a WebMatrix website. It's easy to do and can be completed in about 10 minutes!

WebMatrix is a free tool that allows you to create, customize, and publish webpages. It gives a number of different ways that you can create websites. One of the features is providing existing open sources applications such as WordPress, Joomla, DotNetNuke or Umbraco. WebMatrix can be downloaded for free at www.microsoft.com/web/webmatrix.

Create a new Website with WebMatrix

If you need help downloading and installing WebMatrix, it may be a good idea to read Getting Started with WebMatrix. The article provides step by step instructions on installing WebMatrix

Now we can create a webpage with WebMatrix. Open WebMatrix. For this article, we will use the Empty Site template. This is a full-featured HTML5 site. Select ‘Site from Template’ on the WebMatrix welcome screen.

Select the ‘Empty Site’, give the site a name and press OK.

Clicking ok will take you to your WebMatrix workspace. This contains information about your local host as well a provides resources on developing your site.

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You can look into this workspaces as you work but for this article, we will be working with our Files workspace. To get to your Files workspace, click the "Files" tab on the lower left hand of WebMatrix.

Create a new .cshtml file by clicking on the new tab in the menu ribbon.

You will see all the different options you have for files. Choose .cshtml and give your file a name.

A simple, empty HTML5 valid document is created.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    </body>
</html>

Now we need to create our custom player.

Create your custom YouTube Player

First things first, visit the YouTube widget site to get started adding a YouTube API. This webpage contains information about all the different ways you can incorporate YouTube on your website.

This article will focus on creating a custom player so click the create custom player link. You will be taken to the custom player page. Click on either link to start customizing your player.

You will be prompted to log into your YouTube account, if you're not logged in already. If you do not have a YouTube account, you will need to sign up for one in order to add a customized video player on your webpage.

Once you're logged in, you can start creating your custom player. Click the "Create Custom Player" button to get started.

You'll need to enter a name for your player and give a short description. You can also choose the player's color.

When you're done, scroll down the page. Click the "generate code" button to have your player's code created for you.

You'll now be able to copy your player's code.

Add your custom player to your webpage

Head back to WebMatrix. Add your copied code somewhere between <body> and </body> so your code looks similar to this:

    <body>
        <object width="746" height="413"><param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFNcwL65FYWYbHRG4IQS6UQ-gfMzJGOIbgc="></param>
            <embed src="http://www.youtube.com/cp/vjVQa1PpcFNcwL65FYWYbHRG4IQS6UQ-gfMzJGOIbgc=" type="application/x-shockwave-flash" width="746" height="413"></embed>
        </object>
    </body>

Run your file by clicking the run button on the menu ribbon. You'll see your custom YouTube player on your webpage.

Adding a custom YouTube player was that simple and quick!

Additional Resources

Download webmatrix http://www.microsoft.com/web/webmatrix/

Learn how to Download and Install WebMatrix http://www.microsoft.com/web/post/web-development-101-part-1-getting-started-with-webmatrix

Learn more http://www.microsoft.com/web/post/Web-Development-101-using-WebMatrix

Create a website with a WebMatrix site template http://www.microsoft.com/web/post/create-a-website-from-a-webmatrix-site-template

Publish your website http://www.microsoft.com/web/post/how-to-publish-a-web-application-using-webmatrix

Learn to download, edit and republish your website http://www.microsoft.com/web/post/download-edit-and-republish-your-website-with-webmatrix

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!