[css-d] min-width, width, max-width

2012-10-18 Thread mem 
Hello all,

I'm trying to make a certain video responsive. 
width: 100% or max-width:100% and height: auto; will do.

Now, the problem is, in order to maintain the aspect ratio, if the screen is to 
wide, the height is so height that we will have a scroll, hence, not being able 
to see the video at all.

Is there a way that you may know about, so that we can archive something like 
this

video {
 max-width: 100%;
 height: auto;
}

BUT avoiding the scroll bar to appear, without using overflow:hidden; ?


k. regards,
mem

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] min-width, width, max-width

2012-10-18 Thread mem 
On Oct 18, 2012, at 13:06 , mem wrote:

 Hello all,
 
 I'm trying to make a certain video responsive. 
 width: 100% or max-width:100% and height: auto; will do.
 
 Now, the problem is, in order to maintain the aspect ratio, if the screen is 
 to wide, the height is so height that we will have a scroll, hence, not being 
 able to see the video at all.
 
 Is there a way that you may know about, so that we can archive something like 
 this
 
 video {
 max-width: 100%;
 height: auto;
 }
 
 BUT avoiding the scroll bar to appear, without using overflow:hidden; ?
 

this doesn't seem to be possible, for logical reasons.
If we wish to keep the aspect ratio, then, if the width augments, the height 
augments…

We may try to force it, just to see where we can get, and make something like: 
width: 100% height: 100% …
but I've test this earlier and width didn't get the totality of the containers 
width.

I believe this is undoable… 

k. regards,
mem


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] min-width, width, max-width

2012-10-18 Thread Philippe Wittenbergh 

Le 18 oct. 2012 à 21:06, mem talofo.l...@gmail.com a écrit :

 Is there a way that you may know about, so that we can archive something like 
 this
 
 video {
 max-width: 100%;
 height: auto;
 }
 
 BUT avoiding the scroll bar to appear, without using overflow:hidden; ?

i don't really understand. Are you constraining the height somewhere else ?


This works perfectly fine in my test:
div { border: 2px solid red; max-width: 85%; }
video { max-width: 100%; height: auto; width: 100%; }

The video resizes and keeps its aspect ratio (no height is specified elsewhere 
- not using the width and height attribute on the html element)

divvideo controls=controls
  source src=video.mp4 type=video/mp4
 alt text
/video/div


Philippe
--
Philippe Wittenbergh
http://l-c-n.com




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] min-width, width, max-width

2012-10-18 Thread mem 

 
 i don't really understand. Are you constraining the height somewhere else ?
 

I believe not. But perhaps that is what I should do ?


 
 This works perfectly fine in my test:
 div { border: 2px solid red; max-width: 85%; }
 video { max-width: 100%; height: auto; width: 100%; }
 
 The video resizes and keeps its aspect ratio (no height is specified 
 elsewhere - not using the width and height attribute on the html element)
 
 divvideo controls=controls
  source src=video.mp4 type=video/mp4
 alt text
 /video/div
 

On top of the video we have content.
At the bottom (the footer) we have content.
The video should stay on the middle of that.
The video should always be be, totally visible. 

Here's a test case:


!DOCTYPE html
html lang=en
head
meta charset=utf-8
titleHello User!/title  
style type=text/css
div#video-border { border: 2px solid red; }
video { max-width: 100%; height: auto; width: 100%; }
/style
/head  
  
body
div
div
  Im the navigation!! Wupii
/div
  div
pI'm more text, more things/p
pI'm more text, more things/p
  /div  
  div id=video-border
video controls=controls
  source src=http://video-js.zencoder.com/oceans-clip.webm; 
type=video/webm /
alt text
/video
  /div
  div id=footerpI'm the footer hello/ppI'm the footer yeah 
again/p/div
/body
/html



 
 Philippe
 --

Thanks for your reply, for such an ignorant question.


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] min-width, width, max-width

2012-10-18 Thread mem 
I had a problem with the video aspect ratio that make me doubt of css and html. 
The problem however was within the aspect ratio and NOT html and css.

To cut the story short:
height: auto;
max-width: 100%;

do the job perfectly. 

I will pushing myself severely.


Regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] min-width, width, max-width

2012-10-18 Thread Hakan Kirkan 
Are yo using iframe or obj tag?

See it works Ok here w/o those
http://webdesignerwall.com/demo/elastic-videos/html5-video.html
Check this out, it may help to solve your problem
http://webdesignerwall.com/tutorials/css-elastic-videos


Hakan Kirkan
IT Manager
http://miamirealestateinc.com
Miami / FL

On Thu, Oct 18, 2012 at 8:06 AM, mem talofo.l...@gmail.com wrote:

 Hello all,

 I'm trying to make a certain video responsive.
 width: 100% or max-width:100% and height: auto; will do.

 Now, the problem is, in order to maintain the aspect ratio, if the screen
 is to wide, the height is so height that we will have a scroll, hence, not
 being able to see the video at all.

 Is there a way that you may know about, so that we can archive something
 like this

 video {
  max-width: 100%;
  height: auto;
 }

 BUT avoiding the scroll bar to appear, without using overflow:hidden; ?


 k. regards,
 mem

 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/