Using embedded "feature video" in sidebar

Configuration tutorials for Kinetic

Using embedded "feature video" in sidebar

Postby Don Chambers » Mon Feb 16, 2009 3:33 pm

Embedding a "featured video" in a site's sidebar is becoming increasingly popular. Kinetic makes this incredibly simple.

featured-video-overview-1.jpg
Sample Featured Video placed in double wide sidebar
featured-video-overview-1.jpg (66.98 KiB) Viewed 7678 times


featured-video-detail-1.jpg
Actual size of Featured Video
featured-video-detail-1.jpg (22.1 KiB) Viewed 7679 times


First, we need a video. For this example, I found a rather interesting, and brief, video at youTUBE: http://www.youtube.com/watch?v=JeAmKKrIVlc.

Youtube, and other video sharing sites, typically provide embed code allowing other sites to embed the video. For this example, youtube provides this code:

Code: Select all
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/JeAmKKrIVlc&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JeAmKKrIVlc&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Now that we have our embed code, I have 2 problems with it. First, our double wide sidebar is only 300px wide, so a 425px wide video will not fit. Second, I hate that their code is not xhtml compliant due to the <embed> element. No problem - let's address both issues.

First of all, let's deal with the size. Our desired width is 300pixels. The original is 425px. Simple math says 425/300 = 0.7059, so to display a more narrow image at the same aspect ratio as the original, we need to multiply the original height of 344px by 0.7059, which equals 243px (rounded). We will deal with the xhtml compliance later. Right now, lets get our sidebar code started.

1) From the s9y admin backend, select "configure plugins".
2) Next, select "Click here to install a new sidebar plugin".
3) Under the heading of Frontend: Views, select HTML Nugget.
4) Provide a title, if you want one, for this nugget. This example uses "Featured Video".
5) Add text to the input field "Additional information in Plugin Configuration screen" that will help you remember the exact purpose of this particular html nugget in the event "Featured Video" is not, by itself, sufficient.
6) For now, add the suggested youtube embed code in the content area, making sure to change the width from 425 to 300 and height from 344 to 243:

Code: Select all
<object width="300" height="243"><param name="movie" value="http://www.youtube.com/v/JeAmKKrIVlc&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JeAmKKrIVlc&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="243"></embed></object>

7) Set "Perform Markup Transformations" to "no"
8) Save
9) Click again on "Configure Plugins" and place the newly created html nugget in the sidebar column labeled "DOUBLE".
10) Click again on "save".

At this point, you will have an operable sidebar "featured video". It should fit within the desired 300 px width, and should be the same aspect ratio as the original.

But, let's say you care about xhtml compliance, and like to be able to read your code a bit more clearly... in other words, you are a geek like me!! :ugeek: :mrgreen: Actually, you don't need to be a geek to appreciate these changes. The <embed> element was invented by Netscape, and has never been part of any standard, although most browsers understand its purpose. However, for those who wish to use "cleaner" code, lets get rid of it.

I have a bit of code I like to use for just this purpose, and here it is:
Code: Select all
<!--[if !IE]> -->
<object type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/JeAmKKrIVlc&amp;hl=en&amp;fs=1"
    class="flashplayer"
    height="243" width="300" align="middle">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
    class="flashplayer"
    height="243" width="300" align="center">
    <param name="movie" value="http://www.youtube.com/v/JeAmKKrIVlc&amp;hl=en&amp;fs=1" />
    <param name="wmode" value="opaque" />
<!--><!---->
    <param name="wmode" value="opaque" />
    <param name="quality" value="high" />
    <param name="menu" value="true" />
    <param name="scale" value="noorder" />
    <param name="bgcolor" value="#FFFFFF" />
    <param name="loop" value="false" />
    <param name="salign" value="tl" />
</object>
<!-- <![endif]-->

This code uses conditional comments to emit the <object> element slightly differently for Microsoft IE and all other browsers. Note the path to the youtube video (http://www.youtube.com/v/JeAmKKrIVlc&amp;hl=en&amp;fs=1 in this example) is the same as the original code, and the width and height parameters match our desired reduction in size.

This code example can be used for embedded video in your entries as well, however, given the nature of Kinetic, it is best to embed videos only in the extended body portion of your entry so they do not show, or get truncated, in any of Kinetic's front page category boxes.
=Don=
User avatar
Don Chambers
Site Admin
 
Posts: 226
Joined: Mon Jan 05, 2009 9:58 am
Location: Chicago, IL, USA

Return to Template: Kinetic

Who is online

Users browsing this forum: No registered users and 1 guest

cron