fixed postion and responsivity in bootstrap - css

Question

I have a fixed background video and I used the embed-responsive class to have responsiveness on it. The problem is that the fixed position flow out of the container the video. I first think of adding a margin-top on my sectionone in order to push my content under the video but it wouldn't work on responsivity. So I turning around without any idea to fix it.
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" frameborder="0" width="660" height="371" allowfullscreen="" src="https://www.youtube.com/embed/pUjE9H8QlA4?feature=oembed">
</iframe>
</div>
<div class="sectionone">
<div class="row">
<h3>CONTACTS</h3>
<div class="col-sm-12 col-md-4 ">
<h2>Prénom Nom</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>
<p>Learn More »</p>
</div>
<div class="col-sm-12 col-md-4 ">
<h2>Prénom Nom</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
<p>Learn More »</p>
</div>
<div class="col-sm-12 col-md-4 ">
<h2>Prénom Nom</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
<p>Learn More »</p>
</div>
</div>
</div>
</div>

Answer 1

I'd recommend a javascript approach.
(function($) {
$(document).ready(function() {
var iFrame = $('iframe.embed-responsive-item'),
sectionOne = $('.sectionone');
$(window).resize(function() {
var _frameHeight = iFrame.height();
sectionOne.css('margin-top', _frameHeight + 'px');
}).trigger('resize');
//the timeout below can help with unpredictable network or browser speeds
setTimeout(function() { $(window).trigger('resize'); }, 1000);
});
})(jQuery);
The code above will give you the basics of what you need to do which is wait for the iframe's height to become something that can be determined by jQuery and then applying it to the section that you want to push down. There is no way, that I can think of, to do this with CSS if you are trying to have the video position fixed and the rest of the page content position relative or static.
https://jsfiddle.net/5f0d8L1w/
(the js fiddle does not have the responsive iframe but should demonstrate how to intermingle fixed and relative positioned elements using your html).