How-To embed YouTube videos on your website

So often I find good opportunities to post helpful tutorials that not only benefit our clients, but anyone on the web. Today is one of those days. Let me take your hand and guide you through the wonderful world of YouTube video embedding!

I'm going to use YouTube as the example here, but there are many other video sharing websites i.e. Vimeo, etc. that also provide great services for no cost.

Why use YouTube Video Embedding?

Videos are commonly large files. In internet terms this means anything over 10MB in size. That affects you two ways: 1. takes up web hosting space and 2. uses monthly web hosting bandwidth to process the data. By using a YouTube embed code you are avoiding both of those negative affects. The embed code also includes a player that universally works on all browsers, even on all smart phone browsers.

An added benefit is having the social media capabilities of housing your videos in a networking site like YouTube. Good social media presence goes a long way, this is another avenue to use.

Preparation

Before you are able to do any of these steps you need to have an account on YouTube and add your video. Once that video is uploaded and visible on the website you can follow these steps to obtain the player for your website. Once added you also need to make sure you have "sharing" activated (most sites default to this settings) otherwise embedding will not be allowed.

Step 1: "Share"

You will see a "Share" button just below your video. Click that and you will be presented with options below.

Step 2: Open Embed Options

Once the share options are open you will see the different ways you can share the video. For our purposes we are using the "Enbed" option. So click "Embed."

Step 3: Resize Your Video Player

YouTube will default to a video player size. This is the size it will show up on your website after you've pasted the code. In our websites we include the "Recommended Width" for this option in pixel size. Note that recommended width and type that value into the "Custom" box's "Width:" field. You will see the "Height" feild auto-fill according to the aspect ratio required for the player.

Step 4: Customize The Player

Essentially you have already generated the code necessary to put the video on your website, but there are adnaved options as well for those of you that would like a little more control over your video player. You will see a list of options to the left. I suggest checking the "Show suggested videos..." box to avoid other peoples videos from showing after your's has completed playing. The others really should be left un-checked.

Step 5: Copy the Code

The last step is to copy your auto-generated code YouTube shows above all your options. This is the code you will paste into the CMS for use on your website.

Other Notes

• If you do not resize your player you might stretch or interrupt your website's design layout.
• If your video is removed on YouTube the player will no longer have a video to show. Keep up-to-date on your media inventory in conjunction with your site content.
• The player may cover up content on your site as well. Videos play on a different "layer" than normal website content using their default settings.
• YouTube players are not customizable in terms of their looks. Vimeo offers button recoloring and things like that. The player skins remain the same in design though.