Validate YouTube Code in WordPress – W3C

I always need validate YouTube Code

Since I have a lot of videos that I have uploaded to YouTube (YT) server, and embed those videos in most of my blog posts, I want to share how I add the validated codes.

One of the most interesting post to me in this blog is, how to validate wordpress in W3C.

In that post, someone actually asked, how we can validate YouTube code because by default, YT code contains so many errors and cannot pass the W3C validator.

When we want to add video to our posts in our blogs, of course there is a best wordpress plugin to everyone, but some people, including myself, prefer adding videos to our post without using plugins.

The main reason to add manually, is because I can easily change some codes in HTML visual editor.

Editing manually – Solution to validate YouTube Code

In my “add video to post” article, actually, I recommend using iframe. This iframe will make your video compatible to smartphones, tablets, and other devices.

But there is a downside if you use iframe, especially in WordPress, I have never tried it in static websites, but in WordPress, whenever you edit the post, switching from “Visual” editor to HTML vice versa, will make your video gone or disappeared.

Since I have noticed this small issue, I do not use iframe anymore, because it can be a bit frustating if we have lost the video in our post, because we don’t know where we can find that video again unless that video is yours.

Besides iframe, using plugin can be very handy, but it won’t be validated. At least, all YouTube plugin I have ever tried.

How to validate YouTube code?

The best solution if you want to validate YouTube code is to edit manually before you add the video to your post.

For this, you will have to use “HTML” editor instead of “Visual” editor. I know that so many people always use the visual tab, and some use HTML tab, but to validate YouTube code, we will definitely need to use the HTML tab.

Whenever you want to embed video from YouTube to your blog, you will need the “old embedding” code instead the new one, which is iframe.

Actually some few days ago, I have posted, the “YouTube embed button” is missing in the new YouTube appearance.

In order to get the embedding codes, you can see that post, which I include the screenshot of the “embed” button placement.

validate youtube code

The difference of the codes.

But if you already know how to get the embed codes, the we can go straight to edit them.

1. I assume, you already have the embedding codes from YouTube website, and you are now in “HTML” tab of your post editor.

2. The embed codes from YT, will look like this:

<object> width="425" height="349"><param name="movie" value="http://www.youtube.com/v/7GmTAhfjIIE?version=3&hl=en_US&rel=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed type="application/x-shockwave-flash" width="425" height="349" src="http://www.youtube.com/v/7GmTAhfjIIE?version=3&hl=en_US&rel=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>

3. The codes above, should be like this:

<object type="application/x-shockwave-flash" width="500" height="375" data="http://www.youtube.com/v/7GmTAhfjIIE&rel=0&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_EN&feature=player_embedded&fs=1"><param name="movie" value="http://www.youtube.com/v/7GmTAhfjIIE&rel=0&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_EN&feature=player_embedded&fs=1" /><param name="allowFullScreen" value="true" /></object>

So you can now replace the red highlighted color of step (3) line with your own video codes, in order to get “green validated” sign from W3C.

Yes, it needs a few seconds extra work, but editing the code manually will validate YouTube code in W3C.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page