Tutorial: How To Align and Resize YouTube Videos on wordpress.com

The following code yields the embedded YouTube video below.

<p class="alignleft">
[youtube=http://www.youtube.com/watch?v=kTMwwMaipSw&w=320&h=205]
</p>
<hr />


Here’s the same video using the default YouTube embedding settings.

[youtube=http://www.youtube.com/watch?v=kTMwwMaipSw]


What’s wrong with the default settings for embedded YouTube videos on wordpress.com?

  1. The default alignment is automatically centered horizontally. I want mine aligned to the left.
  2. The default size is 425×350 pixels which adds black borders to the top and bottom of the videos. Also, I like my embedded videos to be 320 pixels wide for people browsing on smartphones.

To modify these settings, we’ll use the HTML editor on a wordpress.com post.

Adding class="alignleft" to the <p> tag takes care of the alignment issue. Use class="alignright" if you want it to align right.

Without the <hr />, the text would flow around the video like this.

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Appending &w=320&h=205 to the YouTube shortcode lets us control the width and height of the embedded YouTube video.

If I wanted a 16:9 video to be 320 pixels wide, then the height would need to be 180 pixels. YouTube’s player bar is 25 pixels tall, so the final YouTube embedded video height should be 205 pixels. You’ll need to do your own math if you want to use a different width or have a 4:3 video.

I hope this helps my fellow wordpress.com users. Also, if you know a better way, please leave a comment. Thanks!


License

CC0
To the extent possible under law, Phloating Man has waived all copyright and related or neighboring rights to Align and Resize YouTube Videos on wordpress.com.

About these ads
This entry was posted in Blog and tagged , , , , , , , , , , , . Bookmark the permalink.

28 Responses to Tutorial: How To Align and Resize YouTube Videos on wordpress.com

  1. Mo says:

    Very useful man – will use this on my main blog!

  2. kenkoller says:

    Thank you so so so so much this has saved me so much time and energy, plus really cleaned up my website, especially my portfolio page. Again thank you so much.

  3. Luke says:

    This is a great post on how to get your videos to line up the way that you want them to. I recently wrote a post about how to get and customize the embed code. Hope this helps someone: http://fatwalr.us/2010/12/how-to-embed-resize-youtube-video/

    • @Luke Thanks for the comment. Your instructions work well for wordpress self-hosted sites, but not for wordpress.com hosted sites since wordpress.com doesn’t allow the embed code.

  4. Superb – I’ve been looking for this for a while now. Simple and to the point as well.

  5. KenKoller says:

    So this was working for me for the longest time, and now all of my videos are centered despite the align codes I had http://kenkoller.com/music-videos/

    This was the code I was using and it was working fine. Suggestions?

  6. KenKoller says:

    For what ever reason the code never worked but I ending up creating tables to organize the videos and align them. Check it out http://kenkoller.com/music-videos/

  7. Great help. Thanks, it worked like a charm. Have a nice time.

  8. The Judge says:

    thanks for the clear concise information. Very helpful.

  9. Thank you very much! I have read a lot of different blogs without a right solution, but yours works perfectly!! ;D

  10. Randall says:

    I get a “potential clickjacking” warning from NoScript for resized YouTube videos (like the one above). Do you know if there is anyway to not get this warning?

  11. I found out how to align Vimeo video’s, using this code:

    [embed w=000&h=000]URL[embed]

    Where 000 is your video size and URL is the vimeo url.

    I’m still looking for a solution for a problem for the youtube videos: when using the tag, it just gives me a black line in my content. Putting two youtube videos using the p class tag together in one page, without the then they are placed next to each other, in stead of on top of each other (horizontally in stead of vertically) I’ve tried using the tag, but doesnt work..anyone have any idea?

  12. This is the most helpfull post I read about aligning. It’s been a great help so far! Thanks!
    However, I get this weird line at the right top of my aligned video. Do you know how to fix this?
    Example: http://garciagoodbye.wordpress.com/2011/11/28/obrigada-para-nos-fas-brasileiros/

  13. Erin Harris says:

    Very helpful–many thanks!

  14. hector0916 says:

    Thank You for your clear cut information.

  15. OHHH THANK YOU SOOOO MUCH!!! very helpful and you are the ONLY person who easily answered all of questions about this!

  16. nostopbutton says:

    Fantastic – just what I was looking for. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s