The visual post editor of WordPress is not very good in handling embed codes of web videos that are hosted on video sharing websites like YouTube, DailyMotion, Blip.tv, Vimeo or MySpace. While every video site provides it’s own embed code for videos, which needs to be pasted in the HTML source of a blog post – they sometime don’t work at all.
Example: Sometimes, you may find that you correctly pasted the embed code of a video in the HTML source of a blog post in WordPress but on switching the post editor to normal mode, the video does not shows up. You revert back to the HTML view of the post and find that the video embed code has simply vanished.
This might be a bug in WordPress post editor and I haven’t found any solution to fix this problem. Sometimes, the video embed codes work, sometime they don’t.
The General Way to Add YouTube Videos Within A Blog Post In WordPress
Let’s first see what is the general way to add the embed code of a YouTube video in the HTML source of a blog post, written in self hosted WordPress CMS.
1. Go to the YouTube video page and click the “Share” button. This will show more options e.g short link, sharing links on Twitter, Facebook, HD URL and the embed code of the video, as shown below:
2. You can either grab the Iframe code of the old embed code for YouTube video. I have observed that the Iframe code may fall apart in certain situations while the old code works fine, irrespective of the WordPress Post editor problem as discussed above.
3. Copy the video source code from the YouTube page, open your blog post from WordPress administration area and switch to the HTML view by clicking “HTML” at the right corner of the post editor
4. Now paste the embed code where you want the video to appear.
You are done with the adding part, now save the draft and hit the “Preview” link to preview the page you just created. If the video does not appear in the preview mode – rest assured WordPress post editor has erased the video embed code and you have to find another simpler method which should work without any problems.
Using the oEmbed Method
This is a really quick way to add web videos to your blog posts but many bloggers are not aware of the Oembed feature.
What is oEmbed ?
oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.
To embed a YouTube, Vimeo or Dailymotion video using the oEmbed method, followthe simple steps mentioned below:
1. Copy the complete URL of the webpage which contains the video (remember to copy including http://)
2. Open your blog post and paste the same URL in the Visual mode and not in the HTML source, as shown in the following screenshot:
3. Remember that the URL should not be linked and should appear as plain text. In short, after pasting the video URL in the post editor, select the complete URL and hit the “Unlink” button once . This will preserve the plain text version of the video URL, without actually linking to it.
4. To align the video towards left, right or in center – you can follow the same convention as that for aligning text.
When you publish the blog post containing the plain text version of the video URL, WordPress or your blogging platform (Tumblr, Posterous for example) will automatically fetch the embed source of the video and dynamically add it to the HTML source of the page.
You might want to read our other related guides on WordPress:
- How to embed Facebook videos and Photo albums in WordPress
- How to embed only the audio of a YouTube video
- Embed YouTube videos with DVD style playback controls
- Crop a YouTube video to show only the selected part
A WordPress Plugin To Customize How YouTube Videos Appear In Your Blog Posts And Pages
If you are looking for more customizations and want to edit the width and height of the YouTube video, without having to touch the embed code – install the Smart YouTube WordPress plugin. The plugin allows you to add YouTube videos in WordPress posts, coments, RSS feeds and pages.Additionally, the plugin allows you to define a custom width and height of the video (maintaining a correct aspect ratio) so your video always appears in the correct size and format.
Here is how the settings panel of the plugin looks like:
The plugin actually works with a shortcode format for embedding YouTube videos, which is really easy to remember. Give this a try !