Styling Youtube Videos on your Blog

Isn’t it weird how I capitalize titles like that sometimes? Moving on.

If you have a blog, chances are you’re going to be using Youtube every now and then. One downfall is that sometimes the video overstretches or is too small for your liking. Another downside is that sometimes you would only like the video to be used for it’s audio. Let’s start with the first issue. So how do you make Youtube videos a smaller size with CSS?

Just assign the embed (I also do the object, for other videos) to a max-width and max-height to a size that will fit nicely in your posts, and add margins as needed.

object,embed {
margin:0 0 18px;
max-width:491px;
max-height:386px;
}

Problem 2. How do you HIDE the video part of a youtube embed and only show the play button & bar for music? This is actually easier than it sounds. Youtube embeds automatically resize gracefully so all you need to do is change the height. Since I don’t want ALL my videos to just be music boxes, I only give this style to a specific class, .musicbox and I use it when needed.

embed.musicbox {
height:25px;
margin:0px;
max-width:237px;
}

Examples: Basshunter – Boten Anna. Lets face it. The video for this song sucks. I give the class musicbox to the inner embed while I write this entry. I’m also gonna center it cause it looks nicer that way. You can do that automatically in the CSS if you want all your musicboxes centered. You can mute and unmute, but you can’t change the volume. What, you wanted to have your cake and eat it too?

This is a clip from the movie Zoolander in Spanish which for some reason makes it alot funnier.. I copied the embed code with the largest size, but my css will still override it. *pets CSS*