How use YouTube — With valid XHTML !!

I wanted to give back to the WordPress community with a little tip on something I worked through last evening.

Do you use YouTube videos? Do you despise them and wish terrible things upon their households for providing invalid code to embed their videos? I know I do!

Well, I came across this site and then used Bablefish to translate it from German to English. As I suspected, they give the valid XHTML to use when embedding YouTube videos.


<div style="text-align:center"><object type="application/x-shockwave-flash" style="width:425px; height:350px" data="https://www.youtube.com/v/VIDEO_ID"><param name="movie" value="https://www.youtube.com/v/VIDEO_ID"></param></object></div>

Now, I can hardly be expected to remember this and be able to type it in by hand each time, so I edited the quicktags to include it in the formatting bar. (I am of course not using the wretched Rich Text Editor. If you do, I’m not sure how you’ll want to handle the following hack).

Open up quicktags.js under /wp-includes/js/, and find the location you want to place the button on the toolbar. I placed it right before the LOOKUP button. Once you’ve found where you want to put it, paste in the following code:


//custom modification - added [YouTube] button for use with You Tube Videos. Prevents validation errors by using valid XHTML.
edButtons[edButtons.length] =
new edButton('ed_youtube'
,'YouTube'
,''
,''
,'y'
); //special case -- controled by edInsertYouTubeVideo() function


Next, scroll down to edit the edShowButton() function. Add the following line before the else statement.


//custom modification - added logic for You Tube video button
else if (button.id == 'ed_youtube') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertYouTubeVideo(edCanvas, ' + i + ');" value="' + button.display + '" />');
}

Finally, add the following code to the end of the quicktags.js file.


//custom mod -- function to add You Tube videos with valid XHTML
function edInsertYouTubeVideo(myField, i, defaultValue) {
if (!defaultValue) {
defaultValue = '';
}
if (!edCheckOpenTags(i)) {
var YouTubeID = prompt('Enter the YouTube Video ID' ,defaultValue);
if (YouTubeID) {
edButtons[i].tagStart = '<div style="text-align:center"><object type="application/x-shockwave-flash" style="width:425px; height:350px" data="https://www.youtube.com/v/' + YouTubeID + '"><param name="movie" value="https://www.youtube.com/v/' + YouTubeID + '"></param></object></div>';
edInsertTag(myField, i);
}
}
else {
edInsertTag(myField, i);
}
}

Upload the file, refresh your browser, and you’ll now have a YouTube button on your toolbar. Pressing it, you’ll be prompted to enter the ID of the YouTube movie you want to embed. You can get this by copying the ID out of the end of the URL of the video on the YouTube site.

Finally, the example I provided used a div wrapper with style=”text-align:center” to center the movie. On my site, I actually wrapped it with a p tag and used a class called center which I defined in my css file to center text. You can always edit this code to meet you own needs.