How to add a floating video player to your website or blog

In this article I will show you how to add a video player to your website or blog using a widget from deepwidget.com. This is useful for playing a single on-demand or live video at user's command, or for showing a 'splash' video that is played automatically as soon as the page is opened.

You can get a taste of how it works by simply clicking on the red tab on the right side of this article to see a video playing. Note that this widget stays at a fixed location and appears to float over the content of the page, so there is no need for you to change your page layout in order to fit it onto the page.

As with all the other widgets from deepwidget.com, once you have done the one-time setup you can add such a video widget, or any other widgets from deepwidget.com, without having to deal with any HTML/Javascript code.  If you are not yet familiar with deepWidget's Sandbox (a what-you-see-is-what-you-get environment where you can try out the widget right on your page), you can find more about it here. If you are a first-time user, you can trying things out in the Sandbox without doing the one-time setup of your page.

Adding the Video Player to Your Page

The widget that we are going to use here is 'Youtube Video with Lightbox Effect.' From inside the Sandbox click on the 'Add' button at left to bring out the list of all available widgets, and select 'Youtube Video with Lightbox Effect'. This will add a red tab labeled as 'Video' on the right side of your page. If you click on the tab you will find a video player sliding out to the center of the page, and begin to play a default tutorial video. This video player will be minimized automatically into a tab when the video is finished.

Customizing the Video Player

You can change the look and behavior of this video player in several ways. In order to start changing the video, find this widget in the left panel of the Sandbox (which displays all of the widgets that you have added onto your page), and click on the 'edit' icon there to bring a widget editor.

• Changing the video. Since this video player is from Youtube, in order to change it to play a different video you will need to get the ID for your video. This ID is an 11-letter sequence (the part highlighted in yellow below) in your Youtube video URL, such as any of the following:
  
       http://www.youtube.com/watch?v=1ANFbUXFoLE
       http://youtu.be/1ANFbUXFoLE
  
  Enter this ID into the field 'The 11-letter Youtube video ID' in the widget editor.

• Changing look and behavior. Since this is one of many 'tabbed' widgets from deepWidget.com, it can be configured to work with other such widgets to create a row of tabs. You can choose to move the tab to the left side of the page, choose whether you want the 'lightbox effect' which dims the page when the video player comes out, or move the tab up and down so that it will be at a place that you want.

• Configure the video to play on page load. For this just change the parameter 'Play the video as soon as the page is loaded' to 'Yes.' The video player will be minimized automatically into a tab when the video is done playing.

Since this widget is based on the Youtube's video player, you will get everything that come with it. This means that if Youtube chooses to insert an ad into your video, then you will see the ad here to. And of course if you want to use a new video, then you will need to upload it to Youtube first.