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.

Introduction to Web Widgets

Web widget is one of the easily ways to add new features to your website. It is worth noting that a ‘web widget’ is meant to be used specifically for enhancing a webpage, and it shouldn’t be confused with other types of software components that are also called 'widgets,' such as those meant to be installed on a PC’s desktop, or user interface code libraries intended for use by software developers, etc.

If you have ever created a YouTube video player on your website, then you already have experience using a typical web widget. In case that you have never done this before, it is achieved with steps like the following (using YouTube as an example):

1. Go to http://youtube.com and find a video that you like
2. Clicking on the ‘Share’ button right under the video
3. Click on the ‘Embed’ button
4. Copy the code to your clipboard
5. Find a suitable place in your webpage and insert the code into your webpage
   
6. Deploy your webpage to your web server so the change becomes visible to the public

these relatively simple steps you now have a video player on your webpage! Virtually all of the web widgets out there work this this, and there are many types of web widgets for meeting all kinds of purposes. This is suitable for someone with some knowledge with the HTML and is comfortable with tweaking a webpage. This tweaking could be as easy as inserting the code at a suitable place in the webpage's HTML code. The code for a 'floating widget' (which does not alter the layout of your webpage) is typically placed at the end of the 'body' tag. This is so that the widget will have minimum impact on the rendering speed of the webpage. In some cases you may need to change the layout of the webpage in order to open up a space for the widget, and in this case the level of HTML skill needed is much higher. Some widget vendors design their widgets in such a way that you can update certain parameters of the widget through an online editor, so that you don't have to redeploy the code whenever you have updated the widget. But in just about all cases if you decide to add a new widget to the page, you still need to open up the webpage and deal with the HTML code again. Popular websites that offer this type of widgets include Widgetbox, Wibiya, etc.

There is an ongoing trend where more and more widgets are of the 'floating' type, which hovers over your webpage. Such widget's position on the screen appears to be fixed and is not affected by how you scroll the page. This has the advantage where you don't have to worry about changing the layout of your webpage.

While today's widget technology is a major advancement from the old days, it nonetheless has some disadvantages:

• It is still a little too hard for average people to use, due to the need to constantly inserting the widget code into the target webpage. Such 'average people' include individual website owners, marketing people for large websites, owner of small business websites, etc. Improved ease-of-use of the widget technology will no doubt broaden its appeal greatly.

• The deployment workflow could be easier. If you have a small website and has the technical knowledge to update the website by yourself, then all is well. Unfortunately many small-medium businesses must rely on someone else to update the website for them, and non-technical people who manage the business side of the website cannot see the outcome until the changes are completed by a web developer. If there is any error, or change of mind (like, errr, I think I want the text color to be red instead), then you have to repeat the whole process. The situation actually gets worse with larges websites, since it usually will involve even more people, including designers, developers, QA, marketing, etc. It is no wonder that even for very large corporations the website is something that you don't want to change unless you really have to. But we are now in an age where website is becoming a vital tool for businesses and individuals, and leaving the website stale is just not acceptable. An improved widget technology that allows marketing people to have direct control of what they need to do will change the landscape greatly.

• Shallow integration. Virtually all of the current-generation widgets are just something that sit on your webpage, and useful as they are they do not respond to other contents on your website. A widget that supports 'deep integration' with your website is capable of changing it look and behavior based on the contents on your website, and this gives you sophisticated functions not possible with the current-generation widgets.

Next-generation web widget

There is a relatively new type of widget called ‘deepWidget’ which is designed to solve the problems mentioned above. It is based on a Web Layering technology which allows you to add layers of widgets over your existing webpage in a web-based WYSIWYG (what-you-see-if-what-you-get) environment, and as a result you get the following advantages:

• Greater ease of use. It allows you to use it even if you have no knowledge with HTML. This means that you can update the widgets that you deployed earlier, remove them, or add new ones, all without having to deal with widget code. This makes it accessible to even tech dummies.

• Instant preview. You get to preview the result in a realistic fashion, which shows you how it looks like with the widget on your target webpage. Amazingly this is not just a static screenshot of how it might look like, but rather it is a functional copy of your webpage plus a fully functional copy of the widget. This means that you can inspect how it is supposed to look or function before it is published, so that there is no guess work. Making your changes go live takes only a couple of mouse clicks.

• Add 'visual depth’ to your webpage. Many deepWidgets are of the ‘floating’ type, which do not require you to update the layout of your webpage. This may seem like a minor plus, but changing webpage layout is actually very much a hassle since there are many things that can go wrong, and there are also many browser types that you need to check against to ensure that there is no problem. You can think of the deepWidget technology as adding layers of page components to your webpage, and aside from the cool look it also allows you to easily add or remove a layer with minimal interference with your existing page, so the risk of making such changes is low.
  
  
• 'Deep integration' with your website. Widgets with such 'deep integration' capability give you sophisticated functions with little effort. This kind of widget changes it look and behavior in response to the content on your website, and it truly become a part of your website. Why would you need this? Just imagine that you can have a countdown widget that is based on the game schedule listed on YOUR website, or a slideshow/video widget that slides out when user scroll a relevant article on YOUR website into view. Simply put, having 'deep integration' means that you get to add sophisticated functions easily that were previously available only with custom web development projects. More on this topic in another post.
  

Note that using the deepWidget does require an one-time setup, where you need to acquire a special code from http://deepwidget.com, and insert it into your webpage. This is an improvement over the current widget technology because you do this only once for your target webpage, regardless of what widgets you want to add later, how many widgets you want to add, or even how often you changed you mind and want to alter the parameters of a widget.

To get a quick sense of how this works you can view this short tutorial video. Alternatively you can also view the tutorial video right here at the bottom of this screen. The video widget displayed here is also a demonstration of what you could do with deepWidget. Note that the widget becomes invisible as soon as you scroll this text out of view. Later I will make another post showing you how you can do something like this in your own blog or website.

More information can be found at the deepWidget website at http://deepwidget.com.