How to add a YouTube channel box to a website

Written by michael carroll
  • Share
  • Tweet
  • Share
  • Email

YouTube provides a plethora of ways to share individual YouTube videos, including embed code you can add to your Web page. However, there is not a feature that generates code to embed a user's entire channel. YouTube instead offers this code in its help pages, and all you have to do is change the code to specify the name of the channel you want to embed before adding it to your Web page. In addition, you can customise the look of the embedded channel by tweaking the code further.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Copy and paste the following code, provided by YouTube, into the body of your HTML document:

    <script src="http://www.gmodules.com/ig/ifr?URL=http://www.google.com/ig/modules/youtube.xml&up_channel=YourChannelName&synd=open&w=320&h=390&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

  2. 2

    Replace "YourChannelName" in the code above with the name of the channel you want to embed. This is the same as the YouTube user name. It appears just after "/user/" in the URL of the channel on YouTube, and before the question mark if there is one.

  3. 3

    Change the thicknesses of the inner and outer borders by modifying the pixel values buried in the URL in the code. The following code is modified to make an outer border of 20 pixels, and an inner border of 10 pixels:

    <script src="http://www.gmodules.com/ig/ifr?URL=http://www.google.com/ig/modules/youtube.xml&up_channel=YourChannelName&synd=open&w=320&h=390&title=&border=%23ffffff%7C10px%2C20px+solid+%23999999&output=js"></script>

  4. 4

    Change the colour of the outer border by altering the second hexadecimal colour code in the embed code. See the Resources section for a hexadecimal colour code generator. The following example makes the outer border red:

    <script src="http://www.gmodules.com/ig/ifr?URL=http://www.google.com/ig/modules/youtube.xml&up_channel=YourChannelName&synd=open&w=320&h=390&title=&border=%23ffffff%7C10px%2C20px+solid+%23FF0000&output=js"></script>

  5. 5

    Change the outer border's appearance by replacing "solid" in the embed code with any one of the following CSS style keywords: "dotted," "dashed," "double," "groove," "ridge," "inset," and "outset."

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.