Top 10 Ways to Embed Video into a Web Page

Since digital camcorders and video editing software became accessible to the large audience, it's no longer a challenge for anybody to make a video. This fact underlies a lot of web trends, namely the sky-rocketing popularity of video sharing portals and widespread use of video content across websites and blogs. A good piece of video can help you deliver your message more effectively, educate readers, stimulate discussion and get your brand going far beyond your own domain. Happily, it's not a problem nowadays to integrate a video into a web page, as there's a lot of different tools to assist with this task. Some of them are free, others are pricey. Here is a roundup of the most popular means of web video embedment.

10 Ways to Embed Video into a Web Page

1. YouTube Embed Code

If you run a branded channel on YouTube, there’s a good opportunity to use YouTube embedding facilities. There are some obvious marketing benefits of this method: once submitted, your video gets involved into the full cycle of YouTube life with its views, search queries, comments, ratings, playlists, etc. Thus, you increase the chances of your video content attracting visitors to your resource. The embedment procedure is fast and easy: you upload a video to your channel, go to the player, acquire the embed code and paste it into your web page. YouTube also provides additional options to customize the player like play in HD, switch to HTTPS, suggest other videos, etc.

2. Vimeo Embed Code

Vimeo is YouTube's main rival, especially in the area of video embedment options. Vimeo videos are also viewed by thousands of web users and can be easily integrated into other websites or blogs. Vimeo player is very handsome and streamlined. The blue “Embed” button in the upper right of the video leads to a dialog box with the embedding options. Basic account holders are allowed to customize player size, text colors and add other elements, while Vimeo Plus members enjoy the complete control over the player, including options to choose what happens next and where the video can appear.

3. Facebook Video Integration

Facebook doesn't officially provide any video embedding options, still if your video is available only on Facebook, there is a workaround. Each video on Facebook has an id which shows in the URL, e.g. http://www.facebook.com/video/video.php?v=2894326448598. Copy the last digits and paste them into the following code instead of xxx in the video link:

1 2 3 4 5 6 7 8

<object width="400" height="224" > <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="movie" value="http://www.facebook.com/v/xxx" /> <embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="224"> </embed> </object>

Then you can put that code on any web pages and the Facebook video will play just like any other Flash video. You can optionally change the player size, add more parameters like autoplay or loop.

4. HTML5 Video

HTML5 is one of the most straightforward new techniques of video embedment. The new <video> tag in HTML5 markup allows web developers to add videos into a web page without any special plugins. To make the most of HTML5 video, you have to prepare your video in three variants – H.264, Theora OGG and WebM, since different web browser support this or that video codec for the new HTML5 standard. The sample code for HTML5 video looks like this:

1 2 3 4 5

<video width="320" height="240" controls autoplay poster="video.jpg"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>

This method has one obvious disadvantage – HTML5 video isn't supported by old versions of Internet Explorer (5,6,7,8) which are still used by the majority of web users. So the old-style Flash embedding code inside the HTML5 video element is often provided as fallback.

5. Freemake Video Converter

If you don't want to outsource video hosting to third-party websites, it's possible to make a video web-ready with the help of Free Video Converter from Freemake.com. This video converter outputs to Flash FLV and SWF formats. The main advantage of this tool is that it provides ready HTML code and step-by-step instructions on how to embed it. Alternatively, you can convert your videos to HTML5 supported format, the converter will prepare all three video variants in a batch and show how to integrate them into HTML5 markup. The software is for Windows only.

6. oEmbed

oEmbed is an open standard for embedding videos and images into a website. You can use the video URL available on YouTube, Vimeo, Dailymotion, Flickr, Scribd, Hulu and supported resources. The simple API allows websites to display embedded content when a user posts a link to that resource, without having to parse the resource directly. So you don't have to copy and paste HTML code from a hosting website every time you wish to embed a video. The best example of oEmbed integration is Facebook’s status update: when you paste a YouTube link in the status bar, it is automatically rendered in the video player. oEmbed easily integrates into WordPress via Shortcode API, the instructions are provided.

7. Quick Media Converter

Quick Media Converter is another Windows-based converter for audio and video. It outputs to Flash, QuickTime, RealMedia, H.264, OGG, so it is possible to make a streaming video for HTML or HTML5 web integration. Video parameters are easily customizable. However, no embed code or batch mode conversions are provided.

8. Free Video Coding

Free Video Coding is an online service which helps create a web video player. Once you enter the website, you get into the FreeVideoCoding wizard. You just need to answer simple questions and the app will create custom HTML video codes based on your answers. You can choose WMV, MOV, SWF, FLV, RM, MPEG, and even AVI for the output. What I missed here is the player preview, though this method is perfect for a novice web blogger.

9. Video LightBox

Video LightBox is a wizard program for Windows and Mac that helps you easily insert video to your website or blog, in a few clicks without writing a single line of code. It is free for non-commercial use, business licenses start at $49. To embed a video, you need to add a video URL (from YouTube, Facebook, Google Video, Metacafe, Vimeo, MySpace) or drag and drop a desktop video file, then select the template and publish the result to your website via a built-in FTP client. Video LightBox offers a wide range of video player templates: rounded, rectangular, in Polaroid, Mac, Facebook or even a yellow sticker style.

10. Easy HTML5 Video

Easy HTML5 Video, as the name hints, is developed to convert videos into HTML5 supported WebM, MP4, and OGG formats. It provides all formats in a batch, embed code and Flash fallback. Plus, it features additional options such as the ability to publish video from the software interface, specify controls for the HTML5 video player, select the video thumbnail, resize video and add a watermark. The program works for Windows and Mac OS, to use it for business you need to buy a license ($49-69).

Conclusion

The methods listed above are well suited for both novice and savvy web developers, each of them having their own pros and cons. Thus, if you opt for a third-party video hosting, keep in mind that the existence of your videos will be fully dependent on the video channel policy. Self-hosted videos can hardly be deleted or republished outside your own resource, but you won't reap the marketing benefits of additional video broadcasting. So it's up to you to decide which method of video embedding to pursue. Still don't forget that posting videos on a regular basis will surely diversify your web content and maximize your online business presence.