this is a little messy so I apologize. I've been working on forming a search results page that will generate a scaffold/grid of embedded youtube videos based on a search function. I've been able to create a "mock" grid using the <span1> and CSS and then tried applying the embedded information and couldn't reach a conclusion.

What's the proper way to accomplish this type of layout?




HTML:

Code:
</head>
<body style="background-color:rgba(121, 59, 0, 0.86)">
        <div class="span1" "video-container">
         <iframe src="http://www.youtube.com/embed/" frameborder="0"></iframe>
</div>
        <div class="span1">video2</div>
        <div class="span1">video3</div>
        <div class="span1">video4</div>
        <div class="span1">video5</div>
        <div class="span1">video6</div>
        <div class="span1">video7</div>
        <div class="span1">video8</div>
    </div>
    
</body>
</html>

CSS:

Code:
.span1 {
    display: block;
    float: left;
    width: 215px;
    height: 150px;
    background-color: #EEE;
    text-align: center;
    min-height: 150px;
    line-height: 150px;
    margin: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 5px;
    
}
.video-container {
    position: relative;
    padding-bottom: 0;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: relative;
    top: 100%;
    left: 100%;
    width: 100%;
    height: 100%;
}