I would like to have my embedded video span the width of the wrapper. Within the wrapper is a div called main-column that is keeping everything 40px away from the edge of the wrapper. So, when I embed a Vimeo video into a page, it naturally crops the video to be 880px rather than the desired full 960px. Is this something that can be fixed with overflow? I am really not sure. Here is the website, if you want to give it a looksy. Thank you in advance!
Thank you for the tip. So, fitvid.js will basically make my video the correct size no matter what the size of the container is? That's cool, but I think I need to word my question differently because that was not what I was having trouble with. Basically, I want my Vimeo video to span the full width of the wrapper, which is 960px. I want it from edge to edge. But the main-column is keeping the video from doing that because there is a limit of 880px. How do I get my video to break the bounds of the main-column while staying within the main-column and keeping it centered?
@chrisburton, I am only using text-shadow on the introductory paragraph and h2s. The rest of the text will be just plain, off-white 'Droid Sans' text. Would you still suggest against that?
You could either break up the wrapper or use absolute positioning.
The problem is that the h2's don't look like headings. Headings are/should be much shorter with just a summary and it doesn't have to be a complete sentence. What I see is paragraph text. But yes, I would lose it.
@chrisburton, but if the text is perfectly legible, then what is the point of not having it? I guess we will have to agree to disagree on this point.
Thank you muchly, @wolfcry911. Your method is a lot better than what I ended up doing. I created a new div id="main-column-mini" which had a width of 880px and then I made main-column have 960px once more. Then I proceeded to wrap the main-column-mini div around anything I wanted to be 880px wide. But alas, your way is much better. Thank you for the fix.
@Paulie_D, and I will add fitvid.js in just a little bit for finicky re-sizing issues.
I would like to have my embedded video span the width of the
wrapper. Within thewrapperis a div calledmain-columnthat is keeping everything 40px away from the edge of thewrapper. So, when I embed a Vimeo video into a page, it naturally crops the video to be 880px rather than the desired full 960px. Is this something that can be fixed withoverflow? I am really not sure. Here is the website, if you want to give it a looksy. Thank you in advance!Check out fitvid.js (http://css-tricks.com/fitvids-js/)
EDIT: Oh...and this...http://css-tricks.com/rundown-of-handling-flexible-media/
Just a suggestion that is unrelated to the question, you shouldn't use text shadows on body copy. That creates legibility issues.
Anyway, I agree with Paulie.
FTW! :)
Thank you for the tip. So,
fitvid.jswill basically make my video the correct size no matter what the size of the container is? That's cool, but I think I need to word my question differently because that was not what I was having trouble with. Basically, I want my Vimeo video to span the full width of thewrapper, which is 960px. I want it from edge to edge. But themain-columnis keeping the video from doing that because there is a limit of 880px. How do I get my video to break the bounds of themain-columnwhile staying within themain-columnand keeping it centered?@chrisburton, I am only using
text-shadowon the introductory paragraph andh2s. The rest of the text will be just plain, off-white 'Droid Sans' text. Would you still suggest against that?Thank you for your help thus far!
You could either break up the wrapper or use absolute positioning.
The problem is that the h2's don't look like headings. Headings are/should be much shorter with just a summary and it doesn't have to be a complete sentence. What I see is paragraph text. But yes, I would lose it.
remove the overflow from #main-column and add a left margin of -40px to the iframe
@chrisburton, but if the text is perfectly legible, then what is the point of not having it? I guess we will have to agree to disagree on this point.
Thank you muchly, @wolfcry911. Your method is a lot better than what I ended up doing. I created a new
div id="main-column-mini"which had a width of 880px and then I mademain-columnhave 960px once more. Then I proceeded to wrap themain-column-minidiv around anything I wanted to be 880px wide. But alas, your way is much better. Thank you for the fix.@Paulie_D, and I will add
fitvid.jsin just a little bit for finicky re-sizing issues.I didn't say it wasn't legible, I was trying to make a point that it makes it less legible. Regardless, I don't think text shadow works there.