You tube brand channel

980 views

Published on

How to create a carousel view for your youtube channel

Published in: Business, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
980
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

You tube brand channel

  1. 1. Designing a Carousel Module Revised: September 22, 2010Google proprietary and confidential. The features described in this document are subject to change. 1 of 9
  2. 2. Designing a Carousel Module Revised: September 22, 2010 Overview About this document Setting up categories (tabs) for your Carousel module Designing your Carousel module Setting custom module colors Uploading a custom background image Selecting videos to display Previewing and embedding the Carousel moduleOverviewThis document describes the Carousel module, which is available for inclusion on brand channelpages. The module, which is 875 pixels wide and 460 pixels high, appears at the top of yourbrand channel page (just below the channel banner) and can also be embedded on third-partywebsites.The Carousel, which is shown below, typically replaces the Featured Video module on a brandchannel page. It lets users scroll through a rotation of videos selected by the brand channelowner.In addition to scrolling through the videos featured in the module, users can click on any videoimage displayed in the module to move the corresponding video to the center of the module. Byclicking on the center image, a user can play the corresponding video directly in the Carouselmodule without leaving or even reloading your channel page. Google proprietary and confidential. The features described in this document are subject to change. 2 of 9
  3. 3. About this documentThis document contains the following sections: • The Setting up categories (tabs) for your Carousel module section explains how to define tab names for the module. • The Designing your Carousel module section explains how to customize the appearance of the Carousel module. It also includes instructions for uploading a background image for the module. To help you create a background image, this section provides a wireframe image that shows the dimensions of the Carousel module and its contents. • The Selecting videos to display section explains how to select the videos that will appear in the Carousel. • The Previewing and embedding the Carousel module section provides a URL for previewing your module as well as HTML code for embedding the module on third-party websites.When you have finished designing your Carousel module, please notify your Technical Producerto have it posted to your channel prior to the launch of your campaign.Setting up categories (tabs) for your Carousel moduleThis section explains how to set the category, or tab, names for your Carousel module. If you donot define different tabs for your module, then all of the videos that you select will display in themodule.To enable the Carousel module to display tabs, go to the Settings page in the administration tooland confirm that the Include categories in contest box is checked. (You may have noticed thatthe Carousel module uses the same administration tools as YouTube contests, and some of theterms used in the tool are still contest-specific.) Google proprietary and confidential. The features described in this document are subject to change. 3 of 9
  4. 4. Use the tool to add the desired number of categories. The category names of the activecategories will be the tab names that appear in your Carousel module. In addition, the tab orderwill match the order in which categories are listed on the Settings page. You can customize themodule to display up to six tabs (or categories) with a minimum of three videos per tab and amaximum of 100 videos per tab. You can also create additional inactive categories for archivingvideos.The screenshot below shows a sample Carousel that contains three tabs:Note that if you only have one active tab, the name of the tab will not actually appear in themodule as shown in the image below:Please note the following additional guidelines for tab names: Google proprietary and confidential. The features described in this document are subject to change. 4 of 9
  5. 5. • Since tabs have a fixed width, category names can only contain a limited number of characters or they will be cut off. The number will vary depending on which letters are used in the category name, the number of capital letters and so forth. Generally, category names will need to be around 21 characters or less. • Category names that include punctuation marks or other special characters may not display correctly. Category names can include periods (.) but should not include other punctuation, including commas, ampersands, percent signs, etc.You can edit category names at any time by updating the Settings page. Please note that whenyou update a category name, any videos that are already associated with that category will still beassociated with the renamed category. As such, you cannot switch the order of two categoriessimply by updating the category names. After entering or updating category names, click thePublish button to save your changes. If your Carousel module is already live, then when yousave your changes, they will also be published in the Carousel module on your brand channelpage.While you can change the order of the tabs (categories) displayed in the carousel, please notethat you cannot change the order of videos that appear in each tab. The videos will appear inrandom order. Also note that the videos played within the Carousel do not have unique URLs, soyou cannot ensure that a specific video will play when users visit your channel page.Designing your Carousel moduleThe Carousel administration tool lets you customize the colors of the modules background, tabsand text. You can also upload a custom background image for the module. The following sectionsdescribe these customization options in more detail: Setting custom module colors Uploading a custom background imageSetting custom module colorsThe administration tool displays the following fields for customizing the colors used in the module.Each field requires a hexadecimal color in the format – e.g. #029a2f. • Background: The background color for the module. This color will only be visible between the time that your channel page loads and your custom background image loads. • Border: The border color for the module and tabs. • Video Highlight: This setting controls the color of the border around the video thumbnail. • Link: For the video details that display beneath the video in the center of the module, this setting determines the color of the link to the video owners channel page. • Tab Text Inactive: The color of the text in the unselected tabs. • Tab Text Active: The color of the text in the selected tab. Google proprietary and confidential. The features described in this document are subject to change. 5 of 9
  6. 6. • Text: This setting determines the color of the video title that displays beneath the video in the center of the module. • Body: This setting determines the color of the video description and other unlinked text that displays beneath the video in the center of the module. • Tab Background Inactive: The background color of the unselected tabs. • Tab Background Active: The background color of the selected tab.The following image shows the different color settings. Note that this Carousel uses a backgroundimage. In the absence of a background image, the background color would display.Uploading a custom background imageBeneath the color settings, the page displays a field to upload a background image file. If you donot upload a background image, the background color that you set for the module will display.The wireframe image below shows the layout of the Carousel module. You can use this layout toensure that any graphics that appear in your background image do not clash or interfere with thevideos displayed in the module. Google proprietary and confidential. The features described in this document are subject to change. 6 of 9
  7. 7. The following list discusses the measurements in the wireframe: • The module displays up to six tabs. Tabs are each 136 pixels wide and 25 pixels high regardless of the number of tabs displayed. Tabs are separated by two pixels of space. • The module displays up to seven still images from videos that you have selected for the module. (You must select at least seven videos for seven images to appear.) The image in the center is the largest and the images at the edge of the module are the smallest. The still images have the following sizes: ◦ Center image: 260px by 196px ◦ Images to left and right of center: 180px by 136px ◦ Images two spots away from center: 74px by 56px ◦ Images at edges of module (three spots from center): 31px by 24px • A reflection appears below each still image. (The reflection of the smallest images are very small and are obscured by the scroll icons.) The sizes of the reflections for the remaining images are: ◦ Center image: 85px by 196px ◦ Images to left and right of center: 58px by 136px ◦ Images two spots away from center: 22px by 56px • Video details display beneath the video in the center position. The space allocated to the title and description for the video are roughly 250px by 51px, and the space allocated to the video owner, rating and viewcount is around 100px by 51px.As noted earlier, users can play videos in the Carousel. The video player, which is shown in thesecond screenshot in the overview, is larger then the still image otherwise shown in the center ofthe module. The video plays in a 420px by 315px (4:3) player, and the player controls occupy anadditional 25 pixels of space below the player. Google proprietary and confidential. The features described in this document are subject to change. 7 of 9
  8. 8. With the player occupying the center 420 pixels of the module, there will be an additional 227pixels to the left of the player and 228 pixels to the right of the player. As such, we recommendthat you place any logos or branding in the corners of the background image. However, you willlikely want to make sure that images in the upper corners should not interfere with the tabs thatdisplay in the module.Selecting videos to displayThe following steps explain how to select videos for your Carousel module: 1. Log in to the Contest Management administration tool. Your Technical Producer will provide you with the correct URL for your account. 2. If you want the Carousel to display tabs, set up categories (tabs) for the module. 3. Click on the Management tab in the administration tool. 4. Scroll over the Add Video to Contest gadget near the top of the page. The gadget will expand to display a field to enter the video ID for the video that you want to add to the Carousel. If you defined categories for the Carousel, the form will also display a menu so that you can select a category. 5. Enter the video ID for the video you want to add and, if you are using categories, select a category. In the URL below, the video ID is shown in bold text: http://www.youtube.com/watch?v=5bewWPW0Ja4 6. Click the Add button, which will add the video as a pending entry. 7. Repeat steps 4 to 6 for each video that you want to add. 8. Click the Management tab again to refresh the list of pending videos. 9. Check the Approve checkbox for each video, which will enable that video to display in your Carousel. 10. Click the Scheduling tab. 11. Click the Edit Visuals link for the Carousel. Google proprietary and confidential. The features described in this document are subject to change. 8 of 9
  9. 9. 12. Confirm that the gadget preview displays the correct videos. If you are using categories in the module, the preview should display the correct categories as well as the correct videos for each category.Previewing and embedding the Carousel moduleThis section explains how to preview your Carousel module or embed the module on otherwebsites.Previewing the Carousel moduleUse the following URL to preview your Carousel module. Note that you will need to replace thetext CHANNEL_NAME with the name of your YouTube brand channel. http://www.gmodules.com/gadgets/ifr? url=http://www.google.com/reviews/polls/v2/contest/ user/CHANNEL_NAME/carouselGadget.xml&container=youtube-contestNote: The URL above has been formatted on multiple lines to ensure a printer-friendly document.Embedding the Carousel module on other websitesUse the following HTML code to embed your Carousel module on another website. Again, you willneed to replace the text CHANNEL_NAME with the name of your YouTube brand channel. As inthe previous example, the URL, which is shown in red text, has been formatted on multiple linesto ensure a printer-friendly document. <iframe src="http://www.gmodules.com/gadgets/ifr? url=http%3A%2F%2Fwww.google.com%2Freviews%2Fpolls%2Fv2%2F contest%2Fuser%2FCHANNEL_NAME%2FcarouselGadget.xml &container=youtube-contest" height="460" width="875" scrolling="no" frameborder="no" style="margin-bottom:15px;" allowTransparency="true"> </iframe> © Google Inc. 2010. All Rights Reserved. Google proprietary and confidential. The features described in this document are subject to change. 9 of 9

×