Css bootstrap中的固定位置和响应度

我有一个固定的背景视频，我使用了嵌入式响应类对其进行响应。问题是固定位置从容器中流出视频。我首先想到在我的第一部分增加一个页边空白，以便将我的内容放在视频下面，但这对响应度不起作用。所以我没有任何想法去修复它

<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><a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></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><a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></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><a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
       </div>
      </div>
</div>

联络
普雷诺姆
HTML是一种用于创建网页的标记语言。HTML教程部分将帮助您了解HTML的基础知识，以便您可以创建自己的网页或网站


普雷诺姆
CSS用于描述网页的表示。CSS教程部分将帮助您学习CSS的基本要素，以便您可以很好地控制HTML文档的样式和布局


普雷诺姆
CSS用于描述网页的表示。CSS教程部分将帮助您学习CSS的基本要素，以便您可以很好地控制HTML文档的样式和布局

我建议使用javascript方法

(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);

上面的代码将为您提供所需操作的基本信息，即等待iframe的高度变为jQuery可以确定的高度，然后将其应用于要向下推的部分。如果你想固定视频位置，而页面内容的其他部分是相对的或静态的，那么我想不出用CSS做这件事的方法

---

（js fiddle没有响应iframe，但应该演示如何使用html混合固定和相对定位元素）。

我建议使用javascript方法

(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);

上面的代码将为您提供所需操作的基本信息，即等待iframe的高度变为jQuery可以确定的高度，然后将其应用于要向下推的部分。如果你想固定视频位置，而页面内容的其他部分是相对的或静态的，那么我想不出用CSS做这件事的方法

---

（js fiddle没有响应iframe，但应该演示如何使用html混合固定和相对定位元素）。

为什么要对想要具有相对/静态显示特征的内容使用固定定位？换句话说，如果iframe需要向下推送内容，那么为什么要将其设置为固定？为什么要对希望具有相对/静态显示特征的内容使用固定定位？换句话说，如果iframe需要向下推送内容，那么为什么要将其设置为固定？非常感谢您的回答非常感谢您的回答