Question

我有一个固定的背景视频，我使用嵌入式响应类来对其进行响应。问题是固定位置流出容器的视频。我首先考虑在我的sectionone上添加一个margin-top，以便在视频下推送我的内容，但它不适用于响应度。所以我转过身来，没有任何想法来解决它。

<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>

Answer 1

我建议使用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执行此操作。

https://jsfiddle.net/5f0d8L1w/

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

在bootstrap中固定位置和响应度

1 个答案: