How to make youtube videos mobile friendly?

PRAB

When i goto my forum from a mobile phone teenspirit.lk the youtube video (width, height) are not auto formatted according to phone width and height. Does anyone know to make this work?

For images i could get it done by

div.Message { max-width: 100%! important; max-height: auto; } .MessageList .Message img{ max-width: 100%!important; max-height: auto; }

An i tried for youtube..

`object[Attributes Style]{
max-width: 100%!important;
max-height: auto;
}

embed[Attributes Style] {
max-width: 100%!important;
max-height: auto;
}`

Please give me a clue. Thanx in advance.

hgtonight

Are the videos an embedded iframe?

http://css-tricks.com/fluid-width-youtube-videos/

vrijvlinder

.MessageList .Message object embed{ max-width:300px;}

Just play with the sizes until you get the best one. percentages do not work on embed objects it has to be the right dimensions. frames can accept percentage size, but the youtube are flash objects.

This would go in your mobile.css

PRAB

@hgtonight No I use old version (using object type of code) for youtube videos, as iframe code doesn't work in my site(videos do not get displayed). And thanx for the link.

@vrijvlinder Thanx. Ya that must be the case. And since mobile screens are dependent from device to device, fixed max-width wouldn't work, i guess.

And with your guys help I found myself a small solution for my case. My videos have full width in the content divs. So when I cut and past the old version code from youtube, I give 100% for max-width and remove width element. But the problem is with height. "Auto" seems to be invalid value. So I give some fixed pixel amount for height. But this is not a good solution as this has to be repeated for every video. So have to find a better solution soon. And I think @hgtonigh's link should have the solution I look for. But still I couldn't grab it.

Thank you guys so much.

PRAB

In another post vanillaforums.org/discussion/comment/177158/#Comment_177158, it is mentioned that iframes are unsecure. And vanilla does not support inframe by default. Is that true?

vrijvlinder

But the problem is with height. "Auto" seems to be invalid value.

The thing is that a flash object already has a fixed width and height written within the flash itself. The players have fixed dimensions and you can't alter the aspect ratio like with images without it coming out bad or getting cropped. It can't interpret undefined which is auto. Coordinates must be given.

the key is to scale them properly this info might help

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageScaleMode.html

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html

http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html

PRAB

@vrijvlinder Thanx. I'l go through them,and let you know about the results. Thanx again.