help troubleshoot a quick css issue WordPress
- SOLVED
I'm doing a simple video embed into a post that is placed into the top of my article and I wanted to center the video.
Simple enough, but...
working link: --video inside container
http://shawn.theanointedone.com/tilt-shift-example/
not working link: --video outside container
http://shawn.theanointedone.com/youtube-vid-test-3/
The only difference is the 'broken' link is using a full width page template, while the 'working' link uses a left sidebar template.
I have no idea why that would affect the video embed, which is why the question here.
The embed code for the video is:
<iframe src="http://player.vimeo.com/video/4946315" width="400" height="300" frameborder="0"></iframe>
From what I gather vimeo seems to determine the video width via the width of the containing div, which I do have set.
Guessing this is probably just some stupid error on my part, but can't seem to figure it out.
Answers (5)
Nilesh shiragave answers:
add this is your themes style.css at the bottom
div.video {
width:970px !important;
text-align:center !important;
padding:0px !important;
margin:0px;
}
div.video iframe
{
margin:0px auto 0px auto !important;
}
shawn comments:
tried it, but the video is still huge with black bars and to wide, not like the first link.
Nilesh shiragave comments:
ok try this if you want width of the video similar to the first link
div.video {
width:970px !important;
text-align:center !important;
padding:0px !important;
margin:0px;
}
div.video iframe
{
margin:0px auto 0px auto !important;
width:650px !important;
}
and if you want width equal to the full container width but inside the borders then try this
div.video {
width:970px !important;
text-align:center !important;
padding:0px !important;
margin:0px;
}
div.video iframe
{
margin:0px auto 0px auto !important;
width:950px !important;
}
shawn comments:
Does not answer my question as to why vimeo is making the video embed code so large - only on my full width temlate page- but it 'works' good enough for now.
Would still like to figure out someday what it is about the page that causes vimeo to jump to an iframe width of 980, instead of sticking to my div width of 650 like it does on the sidebar template.
still -- semi fixes problem so winner for now...
thank you.
Steve Lambert answers:
In the style.css for the Custom Canvas theme there is this chunk:
div.video {
margin-left:auto;
margin-right:auto;
width:650px;
}
When I took out the width line it popped into place.
shawn comments:
When I take that out of my css then the first link, the video does not center in the div.
Is there an easy css attribute to force the video to fit in the div 'centered' without that, which works on both full width and right sidebar templates?
Steve Lambert comments:
try this, it works on both for me.
div.video {
margin-left:auto;
margin-right:auto;
width:950px; /* you'll have to adjust this */
text-align: center;
}
I'm guessing at the width of your video. But I would figure out the width of that div, minus the padding. Right now it is larger than the div, (or the same size, not accounting for padding).
shawn comments:
comes close but not quite right.
I think we're all missing the point here though.
The css works when I am in a page using the sidebar perfectly, it is when I switch to a template with no sidebars that I end up with this huge player with black bars.
I really think the css is missing something for the 'full width' template that works in the sidebar temlate, as all things being equal, it works perfectly with my css in the first link, using the same exact embed code.
<vimeo is dynamically changing it much bigger in the 2nd template by itself>
Andrew C answers:
somewhere in your css you have "left: 222px"
EDIT: makes sense what Steve Lambert said above. the divider is smaller than the video embed code.. which broke your theme.
shawn comments:
The video embed code is actually only 400x300. Vimeo is resizing it somehow to fit into the containing div.
I pasted the actual embed code above in my original post.
I also answered Steve above about loosing my 'center video' in the div without that attribute.
this one is confusing to me, so far only happens with vimeo vids, as others allow me to set the width/height manually, and it sticks.
Andrew C comments:
try narrowing down your .css ..
/* should only be used when small video is displayer */
two-col-left div#wrapper div.video {
margin-left:auto;
margin-right:auto;
width:650px;
}
Andrew C comments:
woops. here's the right code. It should look something along these lines.
/* css should only be used when small video is displayed */
body.two-col-left div#wrapper div.video {
margin-left:auto;
margin-right:auto;
width:650px;
}
shawn comments:
Tried your example didn't work.
I noticed you were referencing two-col-left, which is not the template with the problem, it is body.one-col
I tried one-col as well, but still get the oversized video with black bars.
keep in mind, the 2 links I started with in my original post actually have identical embed code. The only difference is my sidebar template vs. fullwidth template which is somehow causing vimeo to increase the size of the video embed.
Jimish Gamit answers:
"Iframe" reside in <strong><div class='video'><iframe>.....</div></strong>
and 'video' class having width 650. If you are using video class somewhere else also then do apply inline style. Something like this <strong><div class='video' style='width:980px'><iframe>.....</div></strong>
and decrease iframe width
<iframe src="http://player.vimeo.com/video/4946315" width="970" height="300" frameborder="0"></iframe>
Jimish Gamit comments:
video class > style.cs, line 40, div.video
Jimish Gamit comments:
currently its
div.video {
margin-left:auto;
margin-right:auto;
width:650px;
}
change it to
div.video {
margin-left:auto;
margin-right:auto;
width:980px;
}
Ehthisham tk answers:
use this
<iframe height="343" frameborder="0" width="<strong>650</strong>" src="http://player.vimeo.com/video/4946315"></iframe>
yours was
<div class="video"><iframe height="343" frameborder="0" width="<strong>980</strong>" src="http://player.vimeo.com/video/4946315"></iframe></div>