skip to content

Pixel Insights: Online Marketing Blog

How To Add Videos to Your Website that Look Great, Play Everywhere, and Without Programming Knowledge

You just created sweet new video for your website.

Now how the heck do you embed it into your website?

We get this question a lot and for good reason: video marketing can be really powerful. But now that you have your video created, you need to get it online.

We'll put the focus on options that don't require programming knowledge as long as your website has some editing capabilities.

Easy Options:

  • YouTube
  • Other free or paid service.

More Technical Options (coding required)

  • Host directly on your website. (not recommended)
  • Content distribution network + video player.

Hosting Your Video on YouTube

YouTube deserves special attention because it's the largest video hosting service in the world and the second largest online search engine in the world1. For videos that you intend to share for free, it's often the best solution.

Pros

  • Extremely easy to use.
  • YouTube videos get exposure on the YouTube website and in Google search.
  • If you choose to show ads, there is a built-in revenue sharing model.
  • FREE!

Cons

  • Limited control over the player options, such as default playback quality.
  • YouTube branding is always displayed.
  • No way to protect paid content.

Recommended For

  • Getting videos up quickly and easily.
  • Almost any scenario where you want your video to be shared and found. It's very difficult to beat YouTube here.

Embedding YouTube Videos into your Website

Here is a quick video showing the basic process of embedding a YouTube video into a website:

Squeezing More From YouTube

The above steps will get you a good result, but if you are willing to modify the code that YouTube gives you a little, your results will be even better. Let's make a few tweaks to the code that YouTube gave us:

Prevent Related Videos From Displaying at the End of Your Video

This is a big deal because related videos are often irrelevant or worst, videos that your competitors have made. In the video above we already cover how to do this simply by unchecking the "Show related videos" checkboxes when grabbing your embed code. You can also control this in the code that YouTube gives you by changing the rel option from 1 to 0 (relevant part is bolded):

<iframe width="640" height="360" src="//www.youtube.com/embed/aHCbZnnXU6c?rel=0" frameborder="0" allowfullscreen></iframe>

Default YouTube Player to HTML 5 Video

The YouTube player supports Flash and HTML 5, but it defaults to Flash if both are available. Our own testing shows performance benefits from using HTML 5 as the default and as HTML 5 support gets better and better this should only become more true.

Fortunately there's a tweak for that, but you will have to manually change the code that YouTube gives you. You will want to add the following option to the end of the link:

&html5=1

Here is the new code, with the change bolded:

<iframe width="640" height="360" src="//www.youtube.com/embed/aHCbZnnXU6c?rel=0&html5=1" frameborder="0" allowfullscreen></iframe>

Set a Higher Playback Quality

The Youtube player also tends to default to a lower playback quality. You can encourage enabling of HD playback with the following option:

&vq=hd720

The updated code now looks like this:

<iframe width="640" height="360" src="//www.youtube.com/embed/aHCbZnnXU6c?rel=0&html5=1&vq=hd720" frameborder="0" allowfullscreen></iframe>

Enable Modest Branding

If you are using YouTube for product demo videos or other higher quality pieces, it might be desirable to minimize the YouTube branding. Surprisingly the YouTube player gives you an option to tone down the visibility of the YouTube branding on the player by adding the following option:

&modestbranding=1

This gives us the following final code, with all changes we made in bold:

<iframe width="640" height="360" src="//www.youtube.com/embed/aHCbZnnXU6c?rel=0&html5=1&vq=hd720&modestbranding=1" frameborder="0" allowfullscreen></iframe>

That's it! Go make your video great!

Hosting Your Video on other Free or Paid Services

"If YouTube is free, why would I use anything else?"

Free does have a price. There are limitations to the customizability of the YouTube player. YouTube does not have any special functionality to enable distribution of paid videos. And of course there are restrictions on the videos themselves: length, content, format, etc.

Other services also have functionality geared towards business, such as advanced video analytics and powerful tools to display lead generation forms on top of a finished video.

To get a sense of what else is out there, take a look at some of these popular platforms:

Using More Technical Options

Above we've covered how to use video hosting services to very easily add video to your website. For most people that is all they need, but there are two more options you should be aware of.

Hosting Your Video Directly On Your Website Host (and why not to)

You might be tempted to simply upload your video to your website hosting and try to embed it from there.

This can be done, but you will quickly find it's not that easy, and it might not work the way you expect it to. But why?

  • Playing videos online requires very different technology than displaying web pages. Your web host may not have this technology setup, and even if they do, it's competing for resources with everything else your poor web host's server has to do.
  • Unlike text and images, your browser can't really just display a video. It needs additional video player software to be installed on your website, which gives your browser the instructions it needs to display and play the video. If you don't know how to set this up, your video won't play.
  • The video file has to be in the correct format and optimized for the web. Otherwise it will play poorly, not at all, or only on certain browsers.
  • Videos can take up a lot of disk space. It can be a lot less cost effective to host on your web host, particularly if you have a quality host with high levels of backups and redundancy (meaning you pay more for disk space).

Video hosting services like YouTube and others mentioned above exist and thrive because they solve the above problems. They also give you access to additional features such as analytics detailing how long your viewers watch your videos. With both free and paid options available, there isn't really a need to host your video on your web host.

Using a Content Distribution Network + Video Player

If you must have it all, this is the ultimate solution in flexibility. Instead of using the prepackaged functionality of a video host, you can do-it-yourself to gain even greater customizability.

Here are some of the scenarios where this is worth considering:

  • You sell video-based material and need to protect access to it.
  • You need to host a large amount of video content cost-effectively.
  • You need a very high degree of control over how your videos are shown.
  • You have other custom needs that aren't easily met by a video host.

Rather than using a prepacked video hosting solution, you are effectively building your own solution by separately sourcing the hosting and the video playback system, and configuring them to work together exactly how you would like.

To do this, you need three parts:

1. Content Distribution Network
A content distribution network allows you to serve files very quickly to people all over the world. Unlike a regular webhost, a content network is optimized for serving large amounts of generally unchanging files very quickly. We use the Amazon CloudFront service as we've found it to be reliable and with very sophisticated permissions.

2. Video Player
The content network will host your file, but you need video player software to actually play the video on your website. A number of open source and commercial solutions exist depending on what you are looking for. Your web developer can help you pick the right solution.

3. Web Developer
If you want to take advantage of this option, you need web development expertise. The complexity and cost of the work can vary from minor to a significant investment depending on what you are trying to achieve and the scale of your service.

Leave a comment:

Avatars are pulled from Gravatar.com

recent tweets