In this article I will explain how I add YouTube video to a WordPress post or page.

What’s new?

YouTube changed the way videos can be embedded into web pages. The old way used Flash player, which is still available, but the new way is with the YouTube video link inside an HTML5 iFrame.

The old player worked well enough on PCs, Android, and Mac until Apple rejected Adobe Flash and went with HTML5 standards for iPad, iPhone, and iTouch to play video. Now those Apple devices can not view Flash videos (or animations). YouTube offers a non-Flash player for those type of devices. HTML5 allows embedded players to show video but it is an emerging standard and not everyone handled it the same way. Some problems became apparent.

The new YouTube code comes with many parameters that modify the way the video is presented on the page and how it plays when activated. Some of the parameters are the same as the old method. But the way to implement them has changed enough that it is not obvious what is needed to achieve the desired outcome.

Adding video to WordPress has been a fickle process over the various versions. Even now with v3.1.3 I have found that when using the post editor in Visual mode adding video using the toolbar icon can be unpredictable. Sometimes the embed code sticks and sometimes it disappears. Using only the HTML editor seems to be more likely to save the code, and I recommend that you don’t switch between Visual and HTML panes or the embed code will likely not work or be lost.

As an example I will pick a combination of embed parameters that I wanted and worked for me. Your preferences may be different. If you want to see all the parameters available you can find them here.

Get the YouTube video link.

From the YouTube web page of the video that you want to embed:

1. Click on the Share button below the video. A Link to this Video appears in the newer ‘shortcode’ version. Ignore this link.
2. Click on the Embed button beneath it. The iFrame code is then presented in the pane below the button.  This is where you could choose to use the ‘old’ embed code. And there are other choices for HD and related videos, and choices of video size.
3. If you know the width of your WordPress column you can select one of the preset widths or use a custom width. If you choose a custom width the the height is automatically adjusted. For this example I will uncheck “Show suggested video..” and choose a width of 585px because that what will fit in my WordPress column with 5 pixel margins.
4. Copy the basic iFrame code. Click in the code box to highlight the code and press Command-C or Control-C, or from the menu bar select Edit-Copy to copy the text.

e.g. (Do not use the Return key. The code will line-wrap automatically)
<iframe width="585" height="363" src="http://www.youtube.com/embed/HLtmiBvUhRI?rel=0" frameborder="0" allowfullscreen></iframe>

Add the video code to WordPress.

Log in to your WordPress admin to create your new post or page or select the one you want to edit.

Be sure to select the HTML editor tab on the right side.

Paste the copied code into the WordPress post or page. Save Draft and Preview the post/page. Do not switch to the editor’s Visual tab or you might lose your work. Publish/Update when satisfied with your editing.

The result will display as a video image with standard YouTube player controls and require the visitor to click the image to start the video.

Modify the embed code to your preferences.

The additional player parameters that I want to use are:

• to not show the video title (default showinfo is show, =1),
• fade out all the video progress bar video control (default autohide is show play button and volume control, =2),
• hide the YouTube logo (default modestbranding is show, =0) and
• from hyperlink, start without user needing to click play (default autoplay is no, =0).

To add these preferences I modified the embed code to include the relevant parameters.

Note that the first parameter for the YouTube player has a ? The subsequent parameters start with an &. The end of the player parameters is closed with “. There are no spaces between parameters. The iframe parameters are outside the src=”statement”.

e.g. (video image without autoplay)
<iframe width="585" height="365" src="http://www.youtube.com/embed/HLtmiBvUhRI?rel=0&showinfo=0&autohide=1&modestbranding=1" frameborder="0" allowfullscreen></iframe>

If you want the video to be hyperlinked to anchor text “watch the presentation” (in this example, bolded yellow) use this format:
e.g. (hyperlink with autoplay)
Click here to <a href="http://www.youtube.com/embed/HLtmiBvUhRI?rel=0&showinfo=0&autohide=1&modestbranding=1&autoplay=1"><strong><font color="yellow">watch the presentation</font></strong></a>.

Here is the resulting page where the above code can be viewed: http://boomswim.com/floating-inflatable-swimming-pool/

There has been some debate whether the autoplay=1 parameter actually works. It does for me. Some people find it objectionable for a video and audio to begin immediately when they select the video link, especially for office workers. Be aware that autoplays are not counted by YouTube towards view count if that is important to you.

Please leave a comment on your experience with the newer YouTube embed code. It should work to display video for a wider range of devices that may or may not be flash capable, thereby widening your audience, and preparing you to be ready for broader HTML5 support.