How To Embed Video In Webpage With Overlay

Posted in howto, webvideo | 0 comments


« Make Online Video Instantly With muvee Pixie  |  Which Flash To Video Converter Is Suitable For You? »

Many websites are adopting online video as their primary marketing medium. And for good reasons. Videos after all are becoming popular at a scorching pace, and the race is on among websites as to how best to cash in the opportunity.

The demand has opened the doors for innovation in the presentation of video in websites. How many videos should there be on the homepage? What will be the resolution of the videos? Should the videos open in separate windows? Questions like these cloud the minds of website owners, and in some cases no quick solution comes forth immediately.

One of the growing demands for presentation is the need to embed video in webpage with overlay layer. This is understandable because when the video opens on the overlay layer, the viewers do not need to leave the page they are visiting.

So, on one hand the display of video on the overlay layer looks cute and impressive, on the other the advantage is that the viewers remain in the same page without leaving it. What is more, the video can be dismissed easily by the viewer if he so wants, and continue browsing the same webpage.

The following image shows an example of embedding video with overlay layer in this site. Look at the transparency of the overlay layer, and how the video is displayed in the middle.

 

Embedded video in webpage with overlay layer

Video embedded with overlay in our webpage. There are many videos likewise in that page.

3 Ways To Embed Video In Webpage With Overlay

There can be at least 3 ways to embed videos with overlay layer. Two of these can be done with free scripts, while the third one is possible with a paid script. The following video explains them.

 

 

To see live examples of video in webpage with overlay, visit the following URLs:

  1. Overlay lightbox to display video in a webpage with free MooTools script
  2. Overlaying videos with jQuery JavaScript at Flowplayer free
  3. Examples of multiple, multi-size videos on overlay using free jQuery code at Flowplayer
  4. Highslide JS – free for non-commercial use

Though the codes are available free, yet if any of our viewers need professional help, we can attend them for nominal fees. Use the contact form for the purpose.

Get the latest top web marketing tips! 'Like 2WebVideo' now on Facebook below!
This article of August 11th, 2010 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>