Adding Videos to Web Pages

Charlie R. Claywell
Video to Website

Provided they are easy to view, adding videos is a great way to enhance your website's content. Learn how you can post high-quality, fast-loading videos on your site in a few simple steps.

Embedding

Embedding is probably the most common way to put a video on your site because it is simply a matter of cutting and pasting some coding into your HTML. Since video-hosting sites like YouTube, Vimeo and others encourage sharing, they supply you with all the necessary icons and coding.

Access Video Coding

To access the video coding from the hosting site, click the Share or Embed link. It is usually underneath the video or on the right side. When you click the Embed link, it will generate the coding snippet you will copy.

YouTube Example

On YouTube the coding looks like this:

<iframe width="420" height="315" src="//www.youtube.com/embed/JC5DXGIC8s8?rel=0" frameborder="0" allowfullscreen>

Vimeo Example

Vimeo also uses

<iframe src="//player.vimeo.com/video/64864516?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

Customize Size

Since you may not want the default video size, both YouTube and Vimeo allow you to select various sizes from a drop down menu, or even customize the size. This option is extremely handy because the correct width-to-height ratio is maintained for you regardless of the size you choose. Without the correct ratio, your video will look distorted.

Related Videos

Another valuable option YouTube offers is choosing whether or not you want related videos to appear at the end of the video you have selected. Click the checkbox next to, "Show suggested videos when the video finishes," if you do. If you look closely at the coding, you will notice the only change from the coding above is that "?rel=0" was dropped from the link.

<iframe width="420" height="315" src="//www.youtube.com/embed/JC5DXGIC8s8" frameborder="0" allowfullscreen>

Three Ways to Placing Video in HTML

If you need to place the video on your site without embedding, it can be accomplished in several ways -- each with its own weakness.

1. Using the <object> Tag

The <object> tag is basically a container tag for any non-HTML content. To call to a video using this method place the following code in your HTML where you want the video to display:

The coding will call out to the link you provide, in this case intro.swf, always include the height and width attributes to speed up load time. If your content will be viewed mostly on iPads or iPhones, use another method since neither product displays .swf files. The only other potential issue you may encounter is if a user's browser is not Flash-enable, the video will not play.

2. Using <video> in HTML5

This tag works in all modern browsers. Its main weakness is requiring video in multiple formats, increasing storage requirements. The mp4 file format works in Internet Explorer, Chrome, Safari and newer Firefox browsers. The ogg file format is for Opera and older versions of Firefox.

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">



Your browser does not support the video tag.
</video>

If the video does not display, the text "Your browser does not support the video tag." will be displayed instead.

3. Using <video> with <object>

This is probably the best method since it should display correctly in all browsers. Older browsers will read the <object> tag and newer ones will read the <video> tag.

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">



<object data="movie.mp4" width="320" height="240">

</object>
</video>

You will need three formats of your video, though: swf, ogg and mp4.

Working with Flash Videos

If your video is created by Abode Flash, it will be a swf file. These files can be called to using the or tag. Coding for the two methods looks like this:

Object:

Embed:

Publishing Your Video

Depending on the format of your original video clip, you will need to publish it in a Web-friendly format. You will also need to decide whether or not to edit the video, or upload it as is.

Use Video As-Is

  1. Transfer your video from the recording device to your computer by connecting the device through the USB port.
  2. Log in to a video-hosting service, like YouTube or Vimeo if you are comfortable with a free video sharing site. Browse to the clip on your machine, select, and then upload the clip. If you prefer to not use a public site, consider options like Brightcove, Vzaar or Wistia. A key advantage of these sites for a business is control -- settings can be created to prevent or permit specific users from viewing your videos, require user authentication and give you the ability to track user actions.
  3. If you are transferring the video directly from your phone, use the appropriate app to upload the clip to the video-hosting site you are using. To transfer from your phone to place the video on your website, you have three options. You can email the clip to your Gmail account if it is small, connect to your computer through the USB port, or remove the phone's memory card, and connect to your computer with a card reader.

Before uploading your video be sure to read the hosting site's guide, because some only allow videos that are less than five minutes in duration. If yours is longer than the host site allows, will need to trim it.

Edit the Video

With the abundance of free video editing software available, creating high-quality videos for your site doesn't need to be expensive.

  • One commonly used is Windows Movie Maker and it is powerful enough for most users. The program allows you to trim, splice, and edit your video with an easy to understand and simple to use interface. It offers multiple output options, including one linked to YouTube.
  • If you want professional video editing software, a few to consider are Pinnacle Studio, Adobe Premiere Elements, and Final Cut Pro.

Common Web Video Formats

During the uploading process, sites like YouTube and others convert your clip to a Flash video format. Since they control the converting process, they will only accept common video formats like:

  • .mov
  • .mpeg4
  • .avi
  • .wmv
  • .mpegps
  • .flv
  • .3GPP
  • WebM

If your video is in another format convert your file to an approved format. You can do this by importing the file into Window Movie Maker and exporting it in the correct format, or if you are loading it to YouTube, follow their instructions.

Video Hosting Choices

When choosing a video-hosting site or sites, understand their policies to make sure you retain as much control as you want on your content.

Using a Hosting Site

There are obvious advantages for using a hosting site:

  • Potential exposure: One obvious benefit is the potential exposure to your content. YouTube gets more than one billion unique visitors each month - a huge audience for anyone's video.
  • Tagging videos: Another key advantage is the ability to add 'tags' to your video. Tags are keywords used by search engines to find your content.
  • Save on storage: Lastly, you use less of your server space. Videos tend to be large files that eat up storage space very quickly. By letting someone else host your video, all you need is a link or a snippet of coding to add to your site.

Hosting the Video

Probably the most common reason to host your own video is to maintain complete control over the content. If you have the storage space and are concerned about losing control then you should host it on your own server.

Legal Awareness

Be sure to consider copyright issues when showing videos on your website.

Other People's Videos

With sites like YouTube, users uploading a video determine whether they want the video to be public and shared or private. If the option to embed is available on the video you have selected then that video should, by default, be fine to use since the owner granted sharing privileges. However, if you are ever in doubt whether or not you can embed a video, contact the owner of the video.

Music Considerations

When creating a video using music, realize that you may need permission from the owner of the music to use it - or risk engaging in copyright violations. Sites like YouTube will advise you if you are in risk of copyright infringement and offer ways to resolve it. Again, when in doubt concerning a copyright, it is always best to contact the owner of the content -- or don't use it.

Adding Videos to Web Pages