How To Embed Video In A Web Page

May 4, 2010

Video is becoming more and more important for the web. Even individuals and small companies frequently employ videos within their websites for marketing, promotions and as general content. Videos have seen great success when used as viral content for marketing.

This brief article shows how to publish video within a web page using HTML and attributes.

Sample code: Simple embed video within HTML source:

<embed src=”example.mov” width=”250″ height=”300″ controller=”true”>

The above option is fine if your movie is very short. Longer videos will absorb more bandwidth. In such cases you will need to refine your approach.

Alternate options for embedding Video:

Youtube: Fast, easy and free. The downside is that you lose control of the source video and it circulates through the Youtube sites and can be embedded on other websites.

Vimeo: A new alternative to Youtube. Great for sharing videos and embedding them in a web page. Also, allows your video to be shared within communities.

If you choose to resize the video but want to preserve the aspect ratio of the video, you can add an attribute to the <embed> code to prevent distortion. The snippet of code “scale” will allow you to reduce a larger video such as the common size 1280 x 720 to 650 by 450 but not stretch or distort the image. Without the scale code, you will crop the video arbitrarily.

HTML5 will make embedding video in a web page easier!

With the advent of HTML5, embedding a video in a web page will be a snap. The <video> element will be introduced with HTML5. It will also expand and enhance what you can do with video on the web. Currently, there is a battle between web browser designers over what video codec should be supported. Apple and Microsoft are fighting for a video technology that would impose patent issues. For more information about the fight over video technology standards for HTML5 see /Current. There are a number of highly popular video technologies being used widely, and they include: MPEG 4, typically with an .mp4 or .m4v extension, QuickTime container (.mov), Flash Video, typically with an .flv extension, Ogg, typically with an .ogv extension, Audio Video Interleave, typically with an .avi extension.

Tools worth considering for web video

Ironpaper is a results-driven digital marketing agency. Ironpaper integrates design, technology and marketing for the web to drive meaningful results for clients. We are based in New York City and Charlotte, NC.