Live Actor Support

Positioning

This category will cover the majority of questions that pertain to changing the visual position of the video spokesperson on your website. If your question is not covered within this category, please do not hesitate to contact us!

There are multiple ways to "position" the video.

Positioning any item on a website can be done several different ways. In this guide, you will only learn the two most commonly requested methods. These are:

  • Default (Video is placed according to the Browser's "Window Size").
  • Absolute-Relative (Video is placed to never move horizontally, only vertically).

Now that you have a idea of the methods you can learn/use, let's put them to work!

Default

When you receive and insert your new video, it is already configured with our Default Positioning settings. We have found this method to be the easiest for non-technical customers to use on their sites. Users can easily move the video around from the edges of the web browser window on an X & Y axis.


There is one drawback to this type of positioning. The video itself is positioned according to the browser's window size, and not your website's size. Essentially, this means that your video will not remain in the same place of your website except on the screen resolution on which it was set.


Take a look at the code below.




Please take note of the purple text. These variables (175 & 0) are the distance from the edge of the browser windows top and left edge. To move your video further away from the left edge, you could try "top:175px left:200px;". This would cause the video to display 200px from the left edge. The distance from the top would remain the same. Guess and check is typically the best way to achieve your desired result.

Absolute-Relative

If you would prefer your video's location not to change with the various window sizes and screen resolutions, there is a way to achieve this. First, we must understand how "ABSOLUTE POSITIONING" works. It's actually very simple.


"Any HTML object positioned as "absolute," will refer to the first parent element for it's starting point (absolute zero for distances to and from). If there is no parent element positioned as "relative," the object will then refer to the body tag by default."

In other words, we need to "nest" our video HTML code within an element which is positioned as "relative". It's quite simple.


Most websites have a "top-level" or "master" HTML element that contains every other element on your site. It is almost always a TABLE or a DIV. All you need to do is find this element and add a small snippet of code to it. See the code below:



In the graphic above, we have located the "master, top-level" element in the sample code and colored it RED for your convenience. In the next graphic, I will be adding a small snippet in BLUE.


If you are having trouble finding yours, here are a few tips that may help you locate it:

  • It will be somewhere between your <BODY> and </BODY> HTML tags.
  • It's usually near the top of your website's HTML code (not to be confused with JavaScript code).
  • If it is named with an ID, it should be named something like "container" or "master".
  • If you had your website professionally coded, you can follow the "TABS" or "IDENTS" from the left margin in code view. Typically, it will have less indent than any other ELEMENT in the code.


As you can see in the graphic above, we added style="position:relative;" to the master element via an CSS "inline style". Also notice that the video code is "nested" within this master element. **PLEASE NOTE: Both of these are requirements for this procedure to work properly.


Now that these two requirements have been met, you will need to adjust the absolute positioning coordinates just like the "DEFAULT POSITIONING" tutorial at the top of this page suggests. The only difference now, is that your video will move with you page content and not with the size of a user's browser window and/or screen resolution.


Rad

"Putting a live actor on our site was the best move...

"

- Don Jorgenson