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

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