Ubiquitous Video

Incorporating Video into a Website


It’s everywhere you turn.

Video is a common component in websites everywhere. From feature product videos to a video playing in the background, this technology is a crucial aspect that designers should know how to implement and to be involved in this ever-expanding aspect of digital media.

Why Videos?

Videos have IMPACT.

Videos can appeal to the audience both visually and with sound or music. It can be dynamic by including motion as well as other design elements such as lighting, contrast, colors, etc. Now because of technological advances that support video, film, motion graphics and animation on the web, designers are expanding the way video is being used in websites.

How video is used

men-facesVideo is often used in websites for:

  • Entertainment/storytelling
  • Promoting products, services or organizations
  • Providing training or for educational purposes
  • As a design element to add interest to a website

(It can also be a combination of these.)


How do online videos benefit the world at large?

Basically, it is a tool from which may spring a plethora of inspiring ideas, networking for good causes, reaching out to a lot of people and many other benefits. Because of the POWER of videos, it can be used to entice people to buy products (beneficial for business and economy), be informative about an issue, spread awareness about a topic (organization or company) or it can simply entertain audiences for artistic purposes.

Ways to Use Videos

A business that sells a new kind of product can incorporate a video on their website. The video may feature the product in use and show how the product can benefit the viewer. Or the video can simply tell a story that reaches to the emotions of the viewer that compels the viewer. I believe it all comes down to basic human curiosity. A video can reach some viewers in a way that is more compelling than just a still graphic.

Video as a background design element

An emerging trend is to use video as a background instead of a still image. Instead of an isolated “framed box” (within a container) of a video sitting in a website, the video is a part of the whole experience of the website. The video is the background image, filling the entire browser window. 

3-D video on website: (You’ll need some red & blue glasses to view in 3D.)

“Illustrative” Video

Another wonderful example of video used in a website is from The New York Times. It uses video to help illustrate a story: http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek

Interactive Videos

Here are websites that include user interaction within the video:

A Little Bit of History

Film goes way back…it started taking off at the end of the nineteenth century. From silent films to cable TV, film (video) is now a cultural phenomenon in everyday lives around the world.

  • 1990 The Internet was created.
  • 1993 The first live streaming video
  • 1996 Microsoft’s first media player: ActiveMovie
  • 1999 QuickTime player
  • 2005 YouTube

Source: www.blog.treepodia.com

YouTube was a milestone in online video. Started in 2005, it provided a way for anyone to upload, play and share videos.

Tech Talk: How To Add the Video


Okay, so the question remains: HOW does one incorporate a video into a website? What are the options to do so and how does one do it? First I think it is important to understand the following basic ideas…

To Embed or Upload? That is the Question…

To UPLOAD a video means: to HOST your video on your website, similar to uploading pictures to your website. A disadvantage to this is: Bandwidth (It will load down your server, especially if it is widely viewed.)

To EMBED a video means: Using a third party site like Vimeo or YouTube then embedding the video into the website. The advantages are that YouTube is widely viewed, the video can be easily shared and it’s easy to use. Also viewers can decide what resolution to view the video.

Embedding a video using YouTube:

All it comes down to (basically) are these simple steps:

  1. Download video converter
  2. Upload video to YouTube
  3. Code is given, copy and paste the code into HTML file to embed.

That is it! YouTube also provides information if you need assistance.

Using HTML5:

According to this very helpful article, http://www.html5rocks.com/en/features/multimedia, it is fairly simple to add video using an HTML5 <video> tag. The code looks something like this:

<video src=”video.webm” controls></video>

It would be best to include source options in case the browser does not support the file type:

<source src=“movie.webm”/>

Another thing to add to the code is the type attribute. This helps determine which file to play, according to the browser.

<type= “video/webm”/>

There are many more features and options that can be used with this method. To learn more about it visit the article here.

Using a CMS

For example, WordPress: www.wpbeginner.com

A video could be uploaded to a CMS, but as mentioned previously, it may be wiser to use a video hosting website, like YouTube, to embed the video.


Issues to Consider

As a designer, there are some things to consider when choosing how to add videos to a website.

  • Bandwidth: Video uses a lot of data and can be huge in size even if the video is compressed. Some remedies are:
  • Video Compression: This is a topic that usually requires a lot of technical know-how and a lot of learning, but it can be very helpful to understand the basic concepts and codecs if working with online video.
  • External hosting (such as YouTube/Vimeo, etc.)
  • Plug-ins: If using plug-ins, realize that browsers support different plug-ins.

Resources: Video To Website

There is a lot to this topic and this is only a basic starting point. Online video is expanding and being used in new ways as technology expands. It is important for designers to be able to incorporate video in a variety of ways for their clients while searching for new possibilities for video to be used.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s