The Kim Komando Affiliate Station Video Widget
Overview & Installation Instructions

Thank you for choosing to place the Kim Komando Video Widget (the "Widget") on your Web site! We appreciate the opportunity to provide your visitors with quality content—always fresh, entertaining and informative.

Contents

1. What is the Widget?
2. Requirements
3. Features
4. Installation
5. Troubleshooting
6. Examples
7. Terms of Service

What is the Widget?

The Widget is a video player that displays a short video featuring Kim Komando. The Widget is updated several times each week so there is always a new, fresh video available for your site's visitors.

Depending on your available space, the Widget can be quite small, or very large—details on that are below. You place the Widget's code in your Web site's HTML file, and the widget will appear on the page.

Once the Widget is installed on your page, your visitors will be able to watch the video that we've posted by clicking the "play" button. There's nothing you need to do except install the Widget code. We'll take care of the rest!

Requirements

The Widget can go just about anywhere on your Web site. It's a small bit of JavaScript code with a short style sheet. Here are the basics:

1. The Widget must have at least 200 pixels of width
2. The Widget will never take up more than 500 pixels of width (If you have extra, it won't fill that up)
3. On the page on where you will place the Widget, you must not already include an embedded YouTube.com video. We rely on the onYouTubePlayerReady to ensure the Widget loads on time
4. Whoever installs the script should have basic HTML and CSS skill
5. IMPORTANT: The page, or pages, into which the Widget will be inserted must declare a valid HTML or XHTML DOCTYPE and follow that DOCTYPE such that that page or those pages are valid in the context of the declared DOCTYPE. Your DOCTYPE must be for either HTML 4.01 or HTML5. We do not support HTML4.0 or earlier versions of HTML. Failure to declare and follow a supported DOCTYPE will merit you no support from us as we cannot accurately predict what the browsers will do with the Widget.
6. Your Web site's visitors must have JavaScript enabled. If they do not, it's up to you to specify an appropriate message for them, such as:

   <noscript><p>This is supposed to be a video, but you can't see it without JavaScript. Please enable JavaScript to enjoy it!</p></noscript>

7. Your visitors MUST have Adobe Flash Player installed. It's Free! If they do not, they will be directed to a page where they are able to download and install it
8. The Widget will function correctly with the following Web browsers/versions:
   • ☑ Microsoft Internet Explorer: 9, 8, & 7
   • ☑ Mozilla Firefox: 8.0.1, 4.0.1, 4.0, 3.6
   • ☑ Apple Safari: 5
   • ☑ Google Chrome: 16, 11, 10, 9, 8, 7, 6, & 5
9. The Widget may not function with (not tested with):
   • Internet Explorer 6 and older
   • Opera
   • Blackberry
   • Android
10. The Widget will not function with with:
    • ☒ Safari for iOS: iPhone/iPad/iPod (YouTube embed requires Flash, which is not supported by Safari for iOS.)

Features

We've created the Widget to be easy to use for your Web site's visitors, and straight-forward to implement for your Web master. It can be sized to fit almost any page layout, and offers a customizable look and feel.

Our Widget fits all!

The Widget will can be sized to fit your specified location, as narrow as 200 pixes to as wide as 500 pixels.

All you need to do is determine your available width and plug that size into your <div>. The Widget will scale up or down automatically depending on your specification.

New content, no hassle!

The Widget will automatically receive and play the latest Kim Komando video. We'll update the Widget videos at least three times each week, so there's nothing you need to do to get fresh new content delivered and displayed for your site's visitors!

Customizable!

We've created a default color scheme that's pleasing and compatible with virtually any Web site. If you want to change the look and feel, customization can be done using standard CSS code. (See Installation, #4 below for details.)

Installation

When installing the Widget, you have two choices concerning how you are able to embed it. The first (recommended approach) is to embed the Widget directly into your page or use an iframe within which the Widget is embedded. The biggest reason not to go with iframe embedding is the inability to directly modify your HTML code as you are utilizing some form of Content Management System (CMS). The big downside is that you are no longer able to customize the Widget. Functionally, either embed technique is the same for your site visitors.

Directly Embedding the Widget

Direct installation of the Widget is a simple three step process.

1. Copy the default style code below and paste it into the <head></head> section of your Web page where the Widget will appear. Alternately, you can include it in a style sheet in a separate file without the <style type="text/css"></style> opening and closing tags. Comments included to help you remember what it is for later

   <style type="text/css">
   /* BEGIN - Kim Komando Station Daily Widget Styles (v.2) */
   #com-komando-stationdailywidget-widget-instance-id h1,
   #com-komando-stationdailywidget-widget-instance-id h2 {
     color: white; font-family: helvetica, arial; margin: 0; display: block;
   }
   #com-komando-stationdailywidget-widget-instance-id a { color:white; text-decoration: none; }
   #com-komando-stationdailywidget-widget-instance-id a:hover { text-decoration: underline; }
   #com-komando-stationdailywidget-widget-instance-id span { color: #c6bc99 }
   #com-komando-stationdailywidget-widget-instance-id h1 {
     background-color: #35455f;
     text-transform: uppercase;
   }
   #com-komando-stationdailywidget-widget-instance-id h2 {
     background-color: #bb4448;
     padding: 0.3em 0;
     font-weight: normal;
   }
   /* END - Kim Komando Station Daily Widget Styles (v.2) */
   </style>

2. Pick a good location in your Web site to place the Widget. May we suggest near the top of your homepage? Please be sure that you pick a location that is within a block-level element that has only block-level ancestors. See this trouble shooting article for details.
3. Copy the Widget code below and paste it into the HTML code corresponding to your selected location. This code tells your Web page to load up our Widget:

   <script type="text/javascript" src="http://station-daily-widget.komando.com/widget-1.php"></script>

   Please be careful to not copy in the rendered HTML code. If the Widget is embedded more than once on a single HTML page, none of the Widgets will work. Except for the script tag, you don't need any HTML (including div's) to embed the video.

4. Customize your Widget (OPTIONAL!). If you want to change the default style, you can modify it to your specification. Please contact WestStar Affiliate Relations for assistance.

Embedding the Widget with iframes

Iframe installation of the Widget is a simple four step process. If you've already embedded the Widget using the above steps in section "Directly Embedding the Widget," you can skip this section.

1. Pick a good location in your Web site to place the Widget. May we suggest near the top of your homepage? Please be sure that you pick a location that is within a block-level element that has only block-level ancestors.

2. Calculate the size requirements of the frame. The Widget has no control over how much space you provide it and will attempt to become as wide as it can. Therefore, always determine how wide you'd like the Widget to be. This will be the width of your iframe. We'll refer to this as W from here on out. Once you have W, perform the following calculation to get the height, H, of the frame:

   H = (W * 0.5625) + 105

   You will need to know how large your type will be. This will vary from browser to browser, system to system (thus why the direct embed approach is recommended). When in doubt, over-compensate by allotting additional height to the Widget. The calculation is designed to merely get you in the ball-park to guess a height.

3. Copy the Widget code below and paste it into the HTML code corresponding to your selected location. This code tells your Web page to load up our Widget:

   <iframe src="http://station-daily-widget.komando.com/widget-1-html-4.1-transitional-iframe.html" width="400" height="332" scrolling="no" frameborder="0">
   <p>Your user agent does not support frames or is currently configured
   not to display frames. However, you may visit
   <a href="http://station-daily-widget.komando.com/widget-1-html-4.1-transitional-iframe.html">the related document.</a></p>
   </iframe>

4. Resize the iframe by substituting the W and H from your above calculations into the iframe's width and height attributes, respectively.

Troubleshooting

We're sorry to hear you're having trouble with the Widget. We've created a listing of common problems and possible solutions to help you get it working.

• Page stops loading when the Widget is encountered
• Flashblock
• The Widget will not work on an iPhone, iPod or iPad!
• Frames and iFrames
• Small Image Appears Over Video
• The text above and below the Widget is ugly and doesn't have a background color
• CMS Issues (WYSIWYG and Content Managment)
• Whitespace on both sides of text: "Kim Komando" and "komando.com & tvkim.com"
• Image cover is skewed to the right
• Image cover is skewed to the left in IE9
• I followed your instructions and trouble shooting and it's still not working

Page stops loading when the Widget is encountered

While the Widget is obtaining the latest video, your Web site's page may appear to "hang" if the visitor's Internet connection is slow or the servers are unreachable.

There is a timeout of approximately 30 seconds, but this varies by browser and operating system.

If page loading problems persist, please contact WestStar Affiliate Relations for assistance.

Flashblock

Some of your Web site's visitors may have installed Flashblock (Some browsers come with it by default). Flashblock stops the Widget from loading the video player. To use the Widget with Flashblock, your Web site's visitors must disable Flashblock for your site.

To disable Flashblock for static.komando.com, your Web site visitors simply need to:

1. Right-click the space below the image on the Widget
2. For Various Browsers:

   Safari (with Click to Flash)

   Click "Add <your site address here> to Whitelist"

   Firefox (with Flash Block)

   Click "Allow Flash from this site"

   Google's Chrome

   Click "Disable FlashBlock on <your site address here>"

   Replace <your site address here> with the site on which you've embedded the Widget. It should not say "static.komando.com" on your site.

   Flash blocking is IE is more complicated and not enabled by default. For the off-chance that a user has configured his or her browser in an inappropriate manner to emulate Flash blocking behavior, the reader is referred to Per-Site ActiveX Controls in Windows Internet Explorer 8 for more information.

The Widget will not work on an iPhone, iPod or iPad!

The iPhone, iPod and iPad devices do not support Flash, so the Widget will not function on them. A new coding standard (HTML5) is coming that will allow the Widget to function on Apples mobile devices. Once HTML5 is widely available we'll update the Widget so it will work on these devices.

Google is working on a new way to embed HTML5 video to support mobile devices. However, as of this writing, this feature is not yet "the standard."

Frames and iFrames

The Widget does not render properly with Internet Explorer 7 or 8 while embedded in an iframe or frame. You'll see that the video and the image become separated when you do this. We recommend that you simply not include the widget in a frame, as a frame is not necessary.

As of January 13, 2011, the Widget has been approved for embedding via an iframe. The iframe embedding process has been tested and confirmed working with the following browsers:

• Microsoft Internet Explorer: 7 & 8
• Mozilla Firefox: 3.6
• Apple Safari: 5
• Google Chrome: 8 & 10

Small Image Appears Over Video

If you see something similar to the figure on the right, then you likely have the Widget's <script> tag in an inline tag (which will produce invalid HTML when the script runs). The Widget will render correctly only from within block-level elements. Please remove any inline parent elements to the widget. It is OK to put the Widget in the following tags:

Put the Widget in these tags

• body
• div
• td (inside tr and table elements)
• blockquote
• form

Do not put the Widget in these tags

• font (You should not be using this in HTML4.0 and higher as it is deprecated)
• p
• a
• span
• h1, h2, h3, h4, h5, h6
• strong
• em
• u
• frame (not an inline element, but it breaks the Widget)

The above is not a conclusive listing to good or bad tags. The determining factors is the block vs. inline element display type. Always ensure that the Widget script is a child of a block-level parent element and that all ancestors of the Widget's script tag are also block-level elements.

Good Example

It is OK to do the following:

Body

<html>
<head>
[...head tag elements go here...]
</head>
<body>
[...body elements go here...]
<script type="text/javascript" src="http://station-daily-widget.komando.com/widget-1.php"></script>
[...more body elements go here...]
</body>
</html>

Div

[...other html...]
<div>
<script type="text/javascript" src="http://station-daily-widget.komando.com/widget-1.php"></script>
</div>
[...other html...]

Bad Example

It is NOT OK to do the following:

font

This is valid HTML; however the Widget scripts inserts a block element into the page where it's placed and thus once the script executes the HTML becomes invalid. That will break the HTML interpretation and derail the javascript controlling the Widget's behavior. Treat the Widget's script tag as if it were a <div> tag.

[...other html...]
<font>
<script type="text/javascript" src="http://station-daily-widget.komando.com/widget-1.php"></script>
</font>
[...other html...]

Nesting block elements within inline elements

This is not valid HTML. Please refrain from doing things such as the following:

[...other html...]
<font>
[...other html...]
<div>
<script type="text/javascript" src="http://station-daily-widget.komando.com/widget-1.php"></script>
</div>
[...other html...]
</font>
[...other html...]

The text above and below the Widget is ugly and doesn't have a background color

If your Widget instance appears similar to the figure on the left (See "CSS is Missing"), then you likely have not inserted the CSS code or the CSS code is not applied correctly. Please note, that it may not appear exactly as it does in the figure. The tell-tale sign is that the background colors behind the words "Kim Komando" and "komando.com & tvkim.com" are transparent. They should be the dark blue and red colors, respectively. See as an example of a properly rendered Widget.

To fix this issue, insert the CSS code as directed in step 1 of the instructions. Ensure it appears before the Widget insert code as inserted in step 3 of the instructions.

CMS Issues (WYSIWYG and Content Managment)

Sometimes, certain content management systems will replace our script insert with the rendered widget. Please be sure to always put the widget script and style information into the CMS (AKA: WYSIWYG or Content Management System) using the direct to HTML mode. Again, do not use the WYSIWYG mode.

When inspecting the "Source" of the page, you should not see the following in the file:

<div class="com_komando_stationdailywidget_widget_style" id="com-komando-stationdailywidget-widget-instance-id" style="min-width: 200px; min-height: 112px; text-align: center;"><h1>Kim Komando</h1><div id="com-komando-stationdailywidget-widget-instance-id_images" style="position: relative; display: block;"><img style="position: absolute; top: 129.125px; left: 225px; display: none; z-index: 10; cursor: pointer; width: 50px; height: 50px;" alt="Play" src="http://static.komando.com/websites/www.komando.com/station-daily/widget/img/translucent-play-button.png"><img style="width: 500px; height: 281.25px; cursor: pointer; position: absolute; left: 0px; top: 0pt; display: block; z-index: 9;" alt="The Kim Komando Show" src="http://static.komando.com/websites/www.komando.com/station-daily/widget/img/video-covers/finddirt_416.jpg"></div><object width="500" height="308.25" type="application/x-shockwave-flash" id="com-komando-stationdailywidget-widget-player-instance-id" wmode="transparent" style="display: block;" data="http://www.youtube.com/v/6afa7p39a3E?fs=1&amp;hl=en_US&amp;rel=0&amp;enablejsapi=1&version=3&playerapiid=com-komando-stationdailywidget-widget-player-instance-id"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"></object><h2><a href="http://www.komando.com">komando.com</a> <span>&</span> <a href="http://www.tvkim.com">tvkim.com</a></h2></div>

If you do see the above code, remove it and replace it with the script tag above from step 3

Whitespace on both sides of text: "Kim Komando" and "komando.com & tvkim.com"

Sometimes, your site's stylesheet may interfere unexpectedly with the Widget's stylesheet. Due to the infinite combinations of settings for stylesheets and selectors, it is impossible to anticipate all of these problems. One such problem occurs when the tags h1 and h2 have their display set to "inline." The Widget expects these to have a display type of "block."

Wrong

h1, h2 { display: inline; }

Right

h1, h2 { display: block; }

If your site changes the display type of the header types there is a simple fix that will leave the rest of your page unaffected by what goes on within the Widget. Add the following code to your CSS block you inserted in step 1, above.

#com-komando-stationdailywidget-widget-instance-id h1,
#com-komando-stationdailywidget-widget-instance-id h2 {
	display: block;
}		

It doesn't matter where you put that in the CSS block, just so long as it's within a style tag and appears AFTER your h1 and h2 styling for the rest of your page.

Image cover is skewed to the right

IE8, 7 and 6, speicifically, will display the Widget incorrectly and as seen in the figure on the left if the page in which the Widget is embedded does not declare a DOCTYPE. However, other browsers, such as Firefox 3.6, Google Chrome 10, and Safari 5, will display the Widget properly.

As you can see from the figure, the symptoms are that the widget displays and plays, however, the image covering the widget is skewed to the right exactly 1/2 of the image's width. The expected behavior is that the covering is exactly over the video and centered within the width allotted to the Widget.

The Usual Suspects

This usually indicates that your page does not declare a DOCTYPE. The DOCTYPE must be the first thing to appear in any web page so that the web browsers of your visitors know which language to use to interpret the HTML code. If you do not declare one, browsers will usually guess one. Sometimes they guess right, sometimes they guess wrong.

The Real Solution

While not practical for websites that include a large amount of content in many different page formattings, the real solution is to declare a DOCTYPE on the page in which the Widget is embedded. Such a declaration is required to have standardized and validating pages. Be warned, adding a DOCTYPE will usually "break" a page (cause it to render unexpectedly) that has had numerous workarounds added to it to make it appear in a standardized fashion among browsers (many of which may be unnecessary had a DOCTYPE been declared from the start). If this is the case, you must get a web developer who is competent with HTML to design your site to adhere to the established standards.

The Workaround

The embedded version of the Widget has been confirmed to work and display properly on pages that do not declare a DOCTYPE. If you absolutely cannot make your pages standards-compliant, you are encouraged to use the embedded version as described above. However, this configuration is still not supported due to the volitility among browsers when they encounter pages that lack DOCTYPEs. We simply cannot predict what each browser will do now and in the future.

Image cover is skewed to the left in IE9

This issue has been fixed as of March 21, 2011

We have discovered that IE9 has the same issue as above but skews to the left instead of the right. This is because we have tried to compensate in previous versions of Internet Explorer that handle positition incorrectly. It appears that this issue has been fixed in IE9 and we must now add an exception for IE9 to "unfix" this issue. Please stand-by while we remedy this issue.

I followed your instructions and trouble shooting and it's still not working

We're sorry to hear that! While we've tried to plan for every contingency, we understand that nothing is perfect. Please contact us and tell us what's wrong. If possible, provide a link to the page where the Widget is embedded and is not functioning properly. We'll get back to you as soon as possible with a fix or work-around.

Examples

Standard Embed

We've put a small and simple web page together for you if you'd like to study the page's source code. Please see our HTML4.1 Transitional example page to see how to properly add the Widget to your pages.

iFrame

We have now added a way to embed the Widget as an iframe in HTML4.1 pages. Please see our HTML4.1 Transitional frame example page to see how to properly embed the Widget as an iframe insertion to your pages.

Terms of Service

By implementing the Widget, you signify your agreement to the komando.com Terms and Conditions and the komando.com Privacy Policy. If you do not agree, please do not use the Widget.

Copyright

This page, it's contents, and the Widget code are Copyright © 2011 WestStar Digital Audio Services, Inc.

Last update

This page was last updated on January 6, 2012.