[css-d] responsive video
http://decal-bone.com/lab_stories.html i'm trying to embed a video from youtube and make it responsive. i'd like to make 100% of the center column; but i'm getting a miniature version. css is in the head of the document. any help would be appreciated --ron __ 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] responsive video
I use the last solution here: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php which is taken from Thierry Koblentz' solution here: http://alistapart.com/article/creating-intrinsic-ratios-for-video On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman ronzis...@me.com wrote: http://decal-bone.com/lab_stories.html i'm trying to embed a video from youtube and make it responsive. i'd like to make 100% of the center column; but i'm getting a miniature version. css is in the head of the document. any help would be appreciated --ron __ 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/ -- Chris Rockwell __ 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] responsive video
I'm not seeing the css in the head as having any effect on the video or it's wrapper for some reason. FireBug in FF 23.0.1. On Wed, Sep 18, 2013 at 1:41 PM, Chris Rockwell ch...@chrisrockwell.com wrote: I use the last solution here: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php which is taken from Thierry Koblentz' solution here: http://alistapart.com/article/creating-intrinsic-ratios-for-video On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman ronzis...@me.com wrote: http://decal-bone.com/lab_stories.html i'm trying to embed a video from youtube and make it responsive. i'd like to make 100% of the center column; but i'm getting a miniature version. css is in the head of the document. any help would be appreciated --ron __ 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/ -- Chris Rockwell __ 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/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] responsive video
I know this list is CSS-centered, but you could always use: http://fitvidsjs.com/ On Wed, Sep 18, 2013 at 12:43 PM, Tom Livingston tom...@gmail.com wrote: I'm not seeing the css in the head as having any effect on the video or it's wrapper for some reason. FireBug in FF 23.0.1. On Wed, Sep 18, 2013 at 1:41 PM, Chris Rockwell ch...@chrisrockwell.com wrote: I use the last solution here: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.phpwhich is taken from Thierry Koblentz' solution here: http://alistapart.com/article/creating-intrinsic-ratios-for-video On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman ronzis...@me.com wrote: http://decal-bone.com/lab_stories.html i'm trying to embed a video from youtube and make it responsive. i'd like to make 100% of the center column; but i'm getting a miniature version. css is in the head of the document. any help would be appreciated --ron __ 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/ -- Chris Rockwell __ 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/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/ __ 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] responsive video
guys, thanks, but i'm pretty thick
i've tried a few times with no success.
here's the page: http://decal-bone.com/lab_stories.html
the video lives in the center column under the text
html for the vid:
div class=video-container
iframe width=640 height=480
src=//www.youtube.com/embed/wbIe9tXo5wM frameborder=0
allowfullscreen=/iframe
/div
css in the style sheet:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
don't see where i'm messing up. insight appreciated
ron
On Sep 18, 2013, at 3:10 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
Fitvids is a good solution if you're not worried about whether JavaScript is
available and/or you are trying to retrofit an old site with lots of videos
and don't want to mess with the markup. It just automates Thierry's solution
(i.e., it wraps your tags and applies necessary styles)
On Wed, Sep 18, 2013 at 2:53 PM, Nate Turnage pixeln...@gmail.com wrote:
I know this list is CSS-centered, but you could always use:
http://fitvidsjs.com/
On Wed, Sep 18, 2013 at 12:43 PM, Tom Livingston tom...@gmail.com wrote:
I'm not seeing the css in the head as having any effect on the video
or it's wrapper for some reason. FireBug in FF 23.0.1.
On Wed, Sep 18, 2013 at 1:41 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
I use the last solution here:
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
which
is taken from Thierry Koblentz' solution here:
http://alistapart.com/article/creating-intrinsic-ratios-for-video
On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman ronzis...@me.com wrote:
http://decal-bone.com/lab_stories.html
i'm trying to embed a video from youtube and make it responsive. i'd like
to make 100% of the center column; but i'm getting a miniature version.
css is in the head of the document.
any help would be appreciated
--ron
__
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/
--
Chris Rockwell
__
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/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
--
Chris Rockwell
__
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] responsive video
div#content div appears to be over riding styles on .video-container
On Wed, Sep 18, 2013 at 4:40 PM, Ron Zisman ronzis...@me.com wrote:
guys, thanks, but i'm pretty thick
i've tried a few times with no success.
here's the page: http://decal-bone.com/lab_stories.html
the video lives in the center column under the text
html for the vid:
div class=video-container
iframe width=640 height=480
src=//www.youtube.com/embed/wbIe9tXo5wM frameborder=0
allowfullscreen=/iframe
/div
css in the style sheet:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
don't see where i'm messing up. insight appreciated
ron
On Sep 18, 2013, at 3:10 PM, Chris Rockwell ch...@chrisrockwell.com wrote:
Fitvids is a good solution if you're not worried about whether JavaScript is
available and/or you are trying to retrofit an old site with lots of videos
and don't want to mess with the markup. It just automates Thierry's
solution (i.e., it wraps your tags and applies necessary styles)
On Wed, Sep 18, 2013 at 2:53 PM, Nate Turnage pixeln...@gmail.com wrote:
I know this list is CSS-centered, but you could always use:
http://fitvidsjs.com/
On Wed, Sep 18, 2013 at 12:43 PM, Tom Livingston tom...@gmail.com wrote:
I'm not seeing the css in the head as having any effect on the video
or it's wrapper for some reason. FireBug in FF 23.0.1.
On Wed, Sep 18, 2013 at 1:41 PM, Chris Rockwell ch...@chrisrockwell.com
wrote:
I use the last solution here:
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
which
is taken from Thierry Koblentz' solution here:
http://alistapart.com/article/creating-intrinsic-ratios-for-video
On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman ronzis...@me.com wrote:
http://decal-bone.com/lab_stories.html
i'm trying to embed a video from youtube and make it responsive. i'd
like
to make 100% of the center column; but i'm getting a miniature
version.
css is in the head of the document.
any help would be appreciated
--ron
__
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/
--
Chris Rockwell
__
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/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
--
Chris Rockwell
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] responsive video
On 18.09.2013 22:40, Ron Zisman wrote:
here's the page: http://decal-bone.com/lab_stories.html
As Tom says, it's a specificity problem.
With increased specificity via the selector chain...
div#content div div .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
...the .video-container styles will work.
regards
Georg
div#content div div .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
div#content div div .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
__
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] responsive video
On 2013-09-18 13:37 (GMT-0400) Ron Zisman composed: http://decal-bone.com/lab_stories.html i'm trying to embed a video from youtube and make it responsive. i'd like to make 100% of the center column; but i'm getting a miniature version. When first opened there was no video at all, but shortly after Georg's post showed up in my mailbox the video showed up in the page. Virtually everything on that page appears in miniature from where I'm looking: http://fm.no-ip.com/SS/SC/sc-ronzis02.jpg Surely the word responsive in $SUBJECT is not supposed to apply just to just cell phones, tablets and other miniatures. Responsive is a string conspicuously absent from http://css-discuss.incutio.com/wiki/Main_Page . According to the definition on http://en.wikipedia.org/wiki/Responsive_web_design I don't think it's working at all. I played the video several minutes without any speakers connected. I don't think I know yet the purpose of the product line. Does it have something to do with bone research or forensics? -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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] responsive video
On Wed, Sep 18, 2013 at 4:40 PM, Ron Zisman ronzis...@me.com wrote:
guys, thanks, but i'm pretty thick
i've tried a few times with no success.
here's the page: http://decal-bone.com/lab_stories.html
the video lives in the center column under the text
html for the vid:
div class=video-container
iframe width=640 height=480
src=//www.youtube.com/embed/wbIe9tXo5wM frameborder=0
allowfullscreen=/iframe
/div
css in the style sheet:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
don't see where i'm messing up. insight appreciated
ron
Get rid of that comma at the end of this rule. I would have thought
it would still work, but it's definitely not being applied and when I
add the same rule without the comma, things happen.
div#content div div .video-container iframe, {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
--
tim.arn...@gmail.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] responsive video
i think i got it….
that comma was the offender… would have never caught that.
thanks to all
ron
On Sep 18, 2013, at 7:54 PM, Tim Arnold tim.arn...@gmail.com wrote:
On Wed, Sep 18, 2013 at 4:40 PM, Ron Zisman ronzis...@me.com wrote:
guys, thanks, but i'm pretty thick
i've tried a few times with no success.
here's the page: http://decal-bone.com/lab_stories.html
the video lives in the center column under the text
html for the vid:
div class=video-container
iframe width=640 height=480
src=//www.youtube.com/embed/wbIe9tXo5wM frameborder=0
allowfullscreen=/iframe
/div
css in the style sheet:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
don't see where i'm messing up. insight appreciated
ron
Get rid of that comma at the end of this rule. I would have thought
it would still work, but it's definitely not being applied and when I
add the same rule without the comma, things happen.
div#content div div .video-container iframe, {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
--
tim.arn...@gmail.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/
__
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] responsive video
Glad you got it worked out. I want to mention that you might want to
address class/id scheme. You need to get way to specific to get at the
video-container; even on a site with very complex mark-up, I would consider
that way to specific. If you ever want the same styling on a separate
page, you'd have to make sure that you have an iframe, within an element
with a class of 'video-container', that is within a div, that is within a
div, that is within a div with an id if 'content'. Whoa.
csswizardry has an article on this:
http://csswizardry.com/2012/05/keep-your-css-selectors-short/
On Wed, Sep 18, 2013 at 8:25 PM, Ron Zisman ronzis...@me.com wrote:
i think i got it….
that comma was the offender… would have never caught that.
thanks to all
ron
On Sep 18, 2013, at 7:54 PM, Tim Arnold tim.arn...@gmail.com wrote:
On Wed, Sep 18, 2013 at 4:40 PM, Ron Zisman ronzis...@me.com wrote:
guys, thanks, but i'm pretty thick
i've tried a few times with no success.
here's the page: http://decal-bone.com/lab_stories.html
the video lives in the center column under the text
html for the vid:
div class=video-container
iframe width=640
height=480 src=//www.youtube.com/embed/wbIe9tXo5wM frameborder=0
allowfullscreen=/iframe
/div
css in the style sheet:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
don't see where i'm messing up. insight appreciated
ron
Get rid of that comma at the end of this rule. I would have thought
it would still work, but it's definitely not being applied and when I
add the same rule without the comma, things happen.
div#content div div .video-container iframe, {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
--
tim.arn...@gmail.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/
--
Chris Rockwell
__
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/
