How to make youtube videos mobile friendly?
PRAB
New
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.
0
Comments
Are the videos an embedded iframe?
http://css-tricks.com/fluid-width-youtube-videos/
Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
.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
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
@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.
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?
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
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
@vrijvlinder Thanx. I'l go through them,and let you know about the results. Thanx again.