Bootstrap responsive embed disappears when inside flexbox? - css

Question

I am using the flexbox to center align the items inside (as nothing else seems to work). Although the bootstrap responsive-embed seems to completely disappear and i have no idea why. I can't not use position: relative on the embed as this stop it being responsive. Here is the code for it...
.embed-responsive {
/*position: initial;*/ /* if set to initial or anything other than relative is re-appears but is no longer responsive */
}
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small{
color: white;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="title-area">
<div class="col-md-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
JSFiddle

Answer 1

Taking a look to Grid system you may insert your "col-md-6" inside two rows like in the following snipppet:
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small{
color: gray;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="title-area">
<div class="row">
<div class="col-xs-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-xs-6">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
</div>

Answer 2

Add a div around the embed-responsive div so that the former can flow in the flex div and the latter can have position relative needed by the embed-responsive-item. Give the new div a flex-grow style of 1 so it sizes.
HTML:
<div class="title-area">
<div class="col-md-6">
<h1>main title<small>subtitle</small></h1>
</div>
<div class="col-md-6">
<div style="flex-grow: 1;">
<div class="embed-responsive embed-responsive-16by9 video">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rqEy5_W6YHQ?showinfo=0"></iframe>
</div>
</div>
</div>
</div>
Styles:
.embed-responsive {
// position: initial;
/* if set to initial or anything other than relative is re-appears but is no longer responsive */
}
body {
background: grey;
}
div.title-area {
height: 350px;
width: 100%;
position: relative;
padding: 0 50px 0 50px;
}
div.title-area .video {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}
div.title-area > .col-md-6 {
min-height: 100%;
display: flex;
align-items: center;
}
div.title-area h1 {
text-shadow: 0 3px 6px rgba(0, 0, 0, .35);
margin: 0;
text-transform: uppercase;
/*vertical-align: middle;
display: table-cell;
position: relative;*/
}
.title-area h1 > small {
color: white;
font-size: 15px;
text-indent: 5px;
display: block;
opacity: .6;
text-transform: uppercase;
}
https://jsfiddle.net/rz5cmpz3/2/