Recent Posting

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 so that it will become wmode. I choose because many of questioner use youtube video files.

Let's say, This is an example of your youtube embedded code.

<object width="425" height="344">
<param name="movie" value=""></param>
<param name="allowFullScreen" value="true" ></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="" 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=""></param>
<param name="wmode" value="transparent" ></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="" 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)


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 or alike. please do not delete the blue text, =en&fs=1
You get this Video URL in
  • 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.... :)


Cortana said...

Muschas thank you it me works 100 %

continues this way

Cortana said...

I have another question it is possible to place the video mas small and in left side of the text of the principal page of the post and when it(he) does click in ReadMore better presentation appears in the normal size for one
And them same for the images

Cahaya Biru said...

@Cortana; I still try to find the solution about it. By the way, have a nice blogging... :)

Cortana said...

Help me at least with the images

¿where I can find them in the planntilla of monezine to see his format?

Or to centre the picture of adsense

Sir john said...

Nice thx...I found it myself sooner this week and I were not sure if you knew how to solve the problem... The code works as well with Gamezine Template and for embed Picasa slide show

For Picasa slideshow
Add the following code wmode="transparent" right after type="application/x-shockwave-flash"


embed type="application/x-shockwave-flash"wmode="transparent" src="" width="400" height="267" flashvars="" pluginspage="" embed

There you go, it works under gamezine so I guess that it should works under magazine

THX A LOT Cahaya for your great works and for sharing with others

By the way I'm the guy from, do you remember me!? I've wrote you last month concerning the problem with videos in the Gamezine Template

Cahaya Biru said...

@Sir John; You are welcome. :)...

Anonymous said...

wow. thanks.. i try this for your Monezine template, and it's work. hahaha..

Anonymous said...

Hi, what can we do for avoid overflow of our own videos uploaded in blogger?


Administrator said...

go Cahaya Biru!! you're doing a good work!!!

Post a Comment

Calculate Blog Weight

type your web or blog address (max 10)

Powered by iWEBTOOL

Return to Top