Avoiding Video Overflow

Magazine Style Template now are one of the most popular choices in Blogger XML Templates. That magazine usually use single or two inline minipost setting with CSS auto-readmore or probably javascript. However, the problem for video sometime come, not just in Blogger XML but also in wordpress.

In the same time, Many of my template users asking, they said why the video are showed overflow in minipost. Actually I have answered that problems. I said that you have to use wmode setting. But, It seem I have to write about it ...

In this article, I would like to explain about how to customize the video code from youtube.com so that it will become wmode. I choose youtube.com because many of questioner use youtube video files.

CUSTOMIZE YOUR VIDEO CODE WITH WMODE:
Let's say, This is an example of your youtube embedded code.

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

Please see the color text.

• The purple text is youtube URL
• The red text is the code for embedding the URL in your post. Please do not delete this code.
  
• The blue text is parameter allowscreen that need to change with wmode.
  

Then, Change the word:

• "allowFullScreen" with "wmode"
• Change the word "true" with "transparent"
• You also can change the word "true" with "opaque"
• The red text is your youtube url.

(please do not delete the quote symbol)

After your changing, now place your video with wmode into your posting or HTML/Javascript Gadget. Then your modifications are done.

After changing the video code will be look like this:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/SLBbgwN1Mao&hl=en&fs=1"></param>
<param name="wmode" value="transparent" ></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/SLBbgwN1Mao&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" wmode="transparent" width="425" height="344"></embed></object>

Wmode Demo in Magazine Template with Two Inline Minipost
(Click Here)

ANOTHER OPTION: YOU CAN USE THIS HTML STRUCTURE OF WMODE SETTING

The HTML Structure of wmode:

<object width="WIDTH-SIZE" height="HEIGHT-SIZE">
<param name="movie" value="YOUR-VIDEO-OR-FLASH-FILE=en&fs="></param>
<param name="wmode" value="transparent" ></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="YOUR-VIDEO-OR-FLASH-FILE=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" wmode="transparent" width="425" height="344"></embed></object>

The red text is the most important setting.

Change the word

• YOUR-VIDEO-OR-FLASH-FILE with video url. you can get the video url in Youtube.com or alike. please do not delete the blue text, =en&fs=1

example:
You get this Video URL in youtube.com:
http://www.youtube.com/v/SLBbgwN1Mao&hl

• WIDTH SIZE with your own size. Example: 255, 310 (no need to use px symbol). This value is set in pixel.
• HEIGHT SIZE with your own size. Example: 255, 310 (no need to use px symbol). This value is set in pixel.

I think this is enough for the explanation about wmode. By the way, If you like my articles and do not want to miss for new update; please, fill the subscribe form at my footbar. :). At the bottow of my profile.

have a nice try wmode setting.... :)