Can't align div in the right place using css, html - html

Question

Hi, I'm just having problems aligning a div (a video using iframe) on a specific place.
See this image. Example
And this is what just happening
Result
I'm using bootstrap.
Here's my html code
<div class="jumbotron" style="padding-top: 20px;">
<div class="container">
<div class="row">
<!-- Header Content -->
<div class="col-sm-12 text-shadow-area">
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<!-- Video Section -->
<div class="embed-container"><iframe class="frame" src="https://www.youtube.com/embed/5buccFsPJbg?autoplay=0&controls=0&showinfo=0&modestbranding=1&autohide=1&&rel=0&loop=1" frameborder="0" allowfullscreen></iframe></div>
<!--/END Video Section-->
</div>
<!-- /End Header Content -->
</div>
</div>
Here is the css of custom class
.jumbotron {
background: url(../img/bg.jpg) no-repeat;
background-size: cover;
background-position: center center;
position: relative;
min-height: 600px;
margin-bottom:0;
text-align:center;
padding-bottom: 0;
}
.jumbotron:before, #subscribe-bg:before {
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color: rgba(0,0,0,0.3);
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 50%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
.frame {
border:5px solid #e2574c;
}
I want the video to be at the end of the background image's section like the example.

Answer 1

Not sure why you are setting max-width: 50%; on embed container, I put it on the iframe instead. Here is how I changed the code to have it aligned center bottom:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
max-width: 50%;
height: 50%;
}
If you set a fixed width on an absolute positioned element, in this case it's max-width: 50%; you can center it by setting left and right to 0 and margin: auto; for left and right sides.

Answer 2

plz try
.embed-container {
position: relative;
/* padding-bottom: 56.25%;*/
height: 0;
/*overflow: hidden;*/
max-width: 50%;
min-height:600px;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
bottom: 0;
/*left: 0;
right:0;*/
width: 100%;
/* height: 50%; */
}