Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mary Kenkel
Mary Kenkel
4,028 Points
Posted by Mary Kenkel
Mary Kenkel
4,028 Points

CSS margins and responsive videos

I'm been brushing on my CSS so that I can make changes to my website. I've learned it in the past but it's been awhile. So I've been perusing classes here to get back up to speed.

I have added coding to make youtube videos that I add into my blog posts responsive. And that's working great. But there's almost no margin underneath the video and nothing that I do changes that...except wrapping everything inside a p tag. That works and gives me the look I want but that doesn't seem to be the correct way to do it.

Here is my first attempt for the HTML code to embed the video:

<div class="youtubevid"><iframe width="570" height="" src="https://www.youtube.com/embed/I1BGchuEL6M?rel=0" frameborder="0" allowfullscreen=""></iframe></div>

with the associated CSS:

.youtubevid { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 25px; }

.youtubevid iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

The result of this coding is a responsive video, with a nice size top margin but almost no bottom margin.

==========

My second attempt:

<div class="vidspace"><div class="youtubevid"><iframe width="570" height="" src="https://www.youtube.com/embed/I1BGchuEL6M?rel=0" frameborder="0" allowfullscreen=""></iframe></div></div>

with the CSS:

.youtubevid { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }

.youtubevid iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.vidspace { margin-bottom: 25px; }

The result of this coding is the same as the first attempt.

==========

My third attempt:

<p><div class="youtubevid"><iframe width="570" height="" src="https://www.youtube.com/embed/I1BGchuEL6M?rel=0" frameborder="0" allowfullscreen=""></iframe></div></p>

with the CSS:

.youtubevid { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }

.youtubevid iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

The result of this coding is exactly what I want - nice size margins on both the top and bottom. But using a p tag seems the wrong way to do it.

Can anyone tell me what I'm doing wrong?

2 Answers

Mary Kenkel
Mary Kenkel
4,028 Points
Mary Kenkel
Mary Kenkel
4,028 Points

Hello! Thank you so much for your response!

I found the problem...and it's the browser!

I looked at the page on other browsers and I could see the margins that I wanted appeared on the page there. Then, using the inspect tool on the page in the Opera browser, I could see that the CSS that was being applied to the video didn't include the line for margins.

So it seems that Opera wasn't using the most recent version of my CSS file.

I cleared my Opera browser cache and restarted it and now I can see the margins appear as I want.

Again, thank you so much for your response!

Mary

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The very first example should do the trick, don't you see the 25px bottom margin?

Perhaps this code is being combined with some other CSS that is overriding the margin?