Background image and min height design

HTML

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="nav">nav area</div>
            <div class="bg-image">
                <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg" />
                 <h1>This is centered text.</h1>

                <div class="video-container">
                    <iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div class="main">main area</div>
        </div>
    </div>
</div>

CSS

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px;
    /* corresponds to max height of 450px */
    margin: 0 auto;
    position: absolute;
}
.bg-image h1 {
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.nav, .main {
    background-color: #f6f6f6;
    text-align: center;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    max-width: 560px;
    max-height: 320px;
    margin: 0 auto;
}
- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.S5NeZO9l.dpuf