Embed YouTube Videos

There's very little reason to host your own videos these days. YouTube will host your videos and you can easily embed them into your site; however, there are a couple things that can help you out in this area. While embedding YouTube videos is rather simple, Google's current code for embedding YouTube videos doesn't validate correctly. Is that even important? For some it isn't, especially big sites that pump out dozens of articles per day, but for a smaller "static" site it's more important. I've always thought that it's a good idea to validate your pages to make sure your code is good and will render correctly across browsers, especially for static web sites. That and it catches some mistakes you might make.

This tutorial will show you the current method of embedding a YouTube video that results in invalid html markup and then I'll show you the newer method that will validate correctly with only a slight modification.

Embed Video with invalid html markup

The first way is the current common way of embedding a YouTube Video. First, go to the YouTube video you want to embed. Below the video you will see a button that says "<Embed>." Click the <Embed> button and you will see a box just below it fill with code. Below the box with the code you will see four option boxes. In the image below you can see the code and that I have all the option boxes unchecked.

Now all you need to do is copy the code in the code box and paste it into your gpEasy page while in the "source view" of the HTML editor--you do remember that form the HTML editor tutorial don't you? Then save the page and you will have your video. If you want to center your video wrap the code from YouTube with <center></center>. Place the code between those tags and it will be placed in the center of the page. You can also increase the width and height by changing the numbers in the code. That's all there really is to embedding a YouTube video in your gpEasy page. Yes, it's easy. There is only one problem. If you head over to W3C HTML validator and validate your page with the YouTube video you will get quite a few errors. That's not so cool, but it won't harm anything. Personally I like my pages to validate correctly. It helps me check on gpEasy code and my own code. . . so let's try the second method.

Embed YouTube Videos with valid HTML markup

The only difference in this part is that you are going to select the last option below the code on the video you want to embed. See in the image above the option for "Use iframe embed code (beta)"?

We want to check that box. When you do you will get code like:

<iframe class="youtube-player" type="text/html" width="480" height="385" src="http://www.youtube.com/embed/VIDEO_ID"></iframe>

Of course, "VIDEO_ID" will be some funky looking relative path to the video. What do you do with this code? Exactly that same as the other code, copy it and paste it into your gpEasy page while in source view in CKEditor, the HTML editor. You can center it the same way with the <center></center> tags or using <p style="text-align: center; "></p> to wrap the code in. Either way works; however, when you validate this code it will throw up one error. . . the type="text/html" causes a problem with the w3c validator. Easy enough, just delete that little bit and it will validate without a problem.

What's the difference in these two methods? Essentially the latter one is YouTube's new video player based on HTML5 while the previous is the old way of doing things. I haven't checked this new method against Internet Explorer because I don't use it and block it from this site ;). I have checked it against current releases of Google Chrome, Firefox, and Opera and they all work fine with this new method. So, it's what I'm going with.

There is one little oddity about using the iframe method. When you are in the HTML editor the video will display and is playable whereas, the older method would only display a flash box. . . maybe I should have said there's one oddity with the old method?

One other thing to note is, some types of validators still show errors however they are showing errors the for the YouTube page and not your page. I've only noticed this with certain Firefox add-ons and when you check it shows clearly that the gpEasy page is good but the YouTube page containing the video has errors. . . of course Google wouldn't have valid markup. 

Now if you want videos on your site just upload them to YouTube and embed them in your site. It will save you lots of bandwidth.

That's it for this tutorial. Head over to the gpEasy tutorials page to check out other tutorials.


gpEasy B2sq Theme by CS @True Acupuncture