How To Create and Resize A Custom YouTube Player

YouTube allows you to create a custom video player but the process doesn’t include an easy way to set the player size. I’ll show you how to do both.

Create the custom player
You can create a custom player by logging into your YouTube account then selecting “Account” link next to your user name at the top right of the page.

Account link on YouTube

From the Account page, click on the “Custom Video Players” link under the “More” column.

Click on the Create Custom Player button, add the player name and description, select the layout, then select the video(s) you want to include. If you want to create a player for only one video or for a specific group then you can save what you have at this point and create a Playlist with those videos. Otherwise, select the video(s) that you want to include in this player.

Click on the “Select” button once you selected the videos(s) to include in the player.

Once things look good, click on the “Generate Code” button then you’ll see the Embed Code box with the HTML code in it.

YouTube Custom Player Edit

At the time of this post, the default player size is 416 by 337 pixels. You probably noticed that the Create a Custom Player process never allowed you to set the player size. I’ll show you how to edit the code so you can get the right player size.

Edit the Embed Code
Copy the Embed Code and paste it into a Notepad or Text file for now. Now, we’re going to change four parts of that code, the two “width” and two “height” parameters which are both 416 by 337 respectively.

To avoid strenuous math at this point, I included a data table that has the width and height at different percentages of the original player size. So if you want the player to be around 300 pixels wide, you’ll need to set the height to be around 240 pixels, based on the chart below.

Player Parameters
Width Height Percentage
125 101 30
146 118 35
166 135 40
187 152 45
208 169 50
250 202 60
270 219 65
291 236 70
312 253 75
354 286 85
374 303 90
395 320 95
416 337 100
437 354 105
458 371 110
478 388 115
499 404 120
520 421 125
541 438 130
562 455 135
582 472 140
603 489 145
624 506 150

Final Steps
Now that you have the desired width and height, change those values in the Embed Code then add the entire code to your blog. If it doesn’t fit correctly, revisit the table above and find a combination that works for you.

You just learned how to create and resize a custom YouTube Player!

Subscribe to my YouTube Channel

11 thoughts on “How To Create and Resize A Custom YouTube Player”

  1. Pingback: CineVlog – A FREE WordPress Theme For Video Bloggers

  2. Thanks for the post! I followed your instructions, but instead of resizing, it cuts off the right side of the player. Why don't they have options on the embed page? Very frustrating.

  3. Brianna, The main thing is to remember to update *both* areas where height and width are listed. If that doesn't work, post a comment with a link to the page or hit me up on Twitter and I'll take a looksy.

  4. YouTube has a new format now. Does anyone have instructions for the new back office layout? When I go to My Account, the only options are Videos, Insights, Messages, and Settings. Any advice??

  5. Rhea – You can access all the advance YouTube settings by logging into your account, then going to your main channel page. You'll see a button tool bar at the top. Click on Themes & Colors button then click on the “Advanced Options” link. You'll be able to change your background, color settings, and fonts from there.

  6. Pingback: 20 Ways To Add Video To Your Blog Today | JP Luna Web Design

  7. Hey thanks for the tips but when I resize it has a white background in the back larger than the size of the video. Any idea as to why this is happening. Thanks.


  8. I get the same problem as laverty, with the white background that shows from the original size of the player. Looks pretty ugly. Anyone figure out how to fix this? Seems like there is no way to change the overall object size.


    Jim Zak

  9. If you add the wmode=’transparent’ to the embed it will fix the white space around the embed. The tail end of the code will look like this:

    type=”application/x-shockwave-flash” wmode=”transparent” width=”746″ height=”410″>

    note the addition of the wmode=”transparent”

    The resize seems only sensitive to height, not width. But moving the value down from the default makes it jump down in size rather than scale. .. go figure.

Leave a Comment

Your email address will not be published. Required fields are marked *