CODEWITHSUNDEEP
htmlcss
jadeallencook
jadeallencook

Reputation: 686

Scalable Videos Not Making Grid

I have these videos that I'm trying to lay in a grid. Every video would be 25%, so there would be 4 videos in a row. This is what I got. 

.qtvideo {
    position:relative;
    float:left;
    padding-bottom:56.25%;
    padding-top:25px;
    height:0;
}
.qtvideo iframe {
    position: absolute;
    top:0;
    left:0;
    width:25%;
    height:25%;
}

Then my HTML.

<div class="qtvideo">
<iframe width="960" height="720" src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>

<div class="qtvideo">
<iframe width="960" height="720" src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>

I don't get why they're no laying next to each other.

Upvotes: 0

Views: 90

Answers (1)

Ruddy
Ruddy

Reputation: 9923

Like you said you did over think it. Just need 4 divs at 25% width and the iframes in there with 100% of both width and height. Then float the divs left. Done!

HTML:

<div>
    <iframe src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/link" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

iframe {
    width: 100%;
    height: 100%;
}
html, body {
    margin: 0;
}
div {
    float: left;
    width: 25%;
}

DEMO HERE

Upvotes: 1

Related Questions