Adding YouTube Videos with Your HTML Editor

Adding YouTube Videos with Your HTML Editor

Adding YouTube videos with an HTML editor has never been easier. You don t have to know any HTML at all, in fact. You simply need to know how to copy /paste and where you want the video to go. Although this article is focused on YouTube, you can use these steps to embed videos from most video sites.

Why Put Videos on Your Site?
Videos add to the user experience. Many site owners use videos from sites like YouTube because they don t have time to create their own, want to add more information and a richer experience. It doesn t cost anything to do but a few minutes of your time, and the video isn t hosted on your site so it doesn t take up space. It s a win-win situation.

Using Your HTML Editor
Before you look for a video, you need to decide where you re going to put your video. If the video will go in your actual page (where the body of your content is) then placement is easy. Simply decide whether it will go at the top of your content or the bottom and put the code in the corresponding place.

Whether you re using your sidebar or main body, however, you need to know how wide it can be. Generally, body content is anywhere from 400 to 500 pixels wide, so this width or smaller will fit fine. Sidebars are generally 250 pixels wide or smaller, so stay within these limits. You can always change the settings if the video isn t the right size.

Getting the HTML Code
Once you find the video you want to use, it s time to embed (or add) it to your site. How do you do this?

Step #1: Find the video you want to use. We ve chosen a TopTenReviews video review as the example.



Step #2: Click the  Embed  button under the video (where the orange arrow is pointing in above image). The admin panel for your HTML code will be displayed.



Step #3: Choose your options.
Here, you re given the ability to change the color of the video s frame and border (#4 in the above image). You can also choose a preset size for the video, or give it a custom height/width (#5).

In the other options (#3), we recommend leaving the iframe option box empty until the (beta) is removed from the option.

  • Privacy-enhanced: if checked, this keeps the server from picking up any information from the viewers by way of tracking cookies.
  • Related Videos: if checked, this option allows related videos to be seen once your chosen video is over. Play in HD: if checked, this shows the video in High Definition to those with the capability. Those unable to see HD will view the video in normal definition.

Step #4: Check your preview.
You can preview how your video will look in the preview (#2) in above image. Make sure it looks like you expected it to.

Step #5: Open your web page in your HTML editor.
Move to the part of the page you want the video to be.

Step #6: Copy the HTML code.
If you can t see the entire code, you can click and hold the bottom right corner, then drag it down to expose the whole HTML code. Select the entire code and push Ctrl X (Cmd C for Mac users) to copy the selection.
 

Step #7: Paste the selection into your HTML editor where you want the video to show using Ctrl V (Cmd V for Mac).

Step #8: Upload your web page using FTP and view the results. If the video is too big or small, go back to step #3, reset the size and follow the remaining steps. Thanks to the options YouTube offers, the videos are versatile.

Conclusion
With an HTML editor and a video site like YouTube, adding (or embedding) videos on your site is extremely easy. It s all just a matter of setting your options and copy/pasting to show your chosen video to all your visitors.

If you don t have an HTML editor, see our HTML editor reviews to find the best one for you!

At TopTenREVIEWS We Do the Research So You Don t Have To. 

More Top Stories