The video above shows you how to embed Youtube videos to your blog effectively and cleanly. Specifically, what we will be doing is resizing the video to fit into our blog nicely, making the play bar hide itself, removing the distracting information at the top left corner of the embedded video, and removing the related videos at the end. The process is very simple, using only a few modifications.

The final code that you will be using should look something like this:

<iframe src="https://www.youtube.com/embed/rWl4y1-rdMw?rel=0;3&amp;autohide=1&amp;showinfo=0" frameborder="0" width="635" height="353"></iframe>

*Note: The Youtube URL, Width, and Height will vary.

The part that needs to be added to the URL after the “rel=0” part is this:

;3&autohide=1&showinfo=0

Youtube will automatically give you all of the code that you need for the size and showing the related videos, so we only need to worry about the part listed above for the coding part. Just paste this after the “rel=0” section.

The end result will be similar to the way the video on this page looks. The dimensions of the video fit nicely into the blog post, and there will be a simple poster frame and play button instead of displaying the video info and the play bar at the bottom. There is also no border around the frame. When the video plays, you will notice that the play bar will hide itself as you hover away, but if you hover over the video you can still change the resolution, make the video fullscreen, enable captioning, etc. When the video is paused, the video title and information are not displayed. At the end of the video, the related videos are not displayed. This keeps the focus on your blog, and prevents something coming up that you may not want to associate with your blog. It appears that the newest form of embedded Youtube videos no longer have the Youtube logo in the corner of the video anymore, so we don’t have to worry trying to remove the Youtube logo.

Thankfully, the days of the not being able to edit the way your embedded Youtube videos look are apparently gone. For those who want to further customize their embedded videos, Google has a list of several other Youtube Embedded Player Parameters.

Due to the fact that Worpress decided to get rid of the “Press It” function until 2.6, I have recently had the need to post the code that will allow you to use the “Press It” feature on your own.

As it turns out, it is supposedly very hard to post code in WordPress. If you just copy and paste your code in, WordPress will turn your quote marks into “Smart Quotes”. They look pretty, but do not work with code. So I set about finding a plugin or some other method to correct this.

Everywhere I looked people were recommending different methods. From using plugins and custom fields, to manually editing, and to online converters. I tried them all, but they either didn’t display the code correctly, or messed up my formatting site wide.

So here is my solution, it may have been suggested before, but I sure couldn’t find it with hours of searching and testing. Simply insert this code into your style sheet:

pre {
width: 95%;
overflow: auto;
padding: 10px;
margin: 1em auto;
font-family: "Courier New", Courier, mono;
background-color: #ddd;
color: #555;
border: 1px dotted #999;
}

Now, when you paste your code into the WordPress editor, highlight it, and select the preformatted option from the “Format” drop down menu.

The pre tag will preserve your quote marks, spacing, indenting, and other elements.

And thats all you have to do. Your code will work when copied and pasted from the browser. If you have a long line of code, instead of running over everything, this will make a horizontal scroll bar to contain it.

Note: WordPress may apply separate <pre> tags to each line when you select it from the drop-down menu. (I have no idea why, it defeats the whole purpose of <pre> tags) To get around this, either manually add <pre> and </pre> before and after the text under the HTML tab in the edit screen, or apply the formatting with the code all as one line, and add the line breaks in afterward.