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 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.... :)

9 comments:

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"

Exemple:

embed type="application/x-shockwave-flash"wmode="transparent" src="" width="400" height="267" flashvars="host=picasaweb.google.ca&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.ca%2Fdata%2Ffeed%2Fapi%2Fuser%2Fjocloutier%2Falbumid%2F5322513555185515969%3Fkind%3Dphoto%26alt%3Drss" pluginspage="http://www.macromedia.com/go/getflashplayer" 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 http://gamesatwar.blogspot.com/, 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. :)...

artvisualizer said...

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

José C. Castillo said...

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

Thanks

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)
 
(example: cahayabiru.com)  
 

Powered by iWEBTOOL


Return to Top