feste Position und Antwort in Bootstrap

Question

Ich habe ein festes Hintergrundvideo und ich habe die Embed-responsive Klasse verwendet, um Reaktionsfähigkeit zu haben. Das Problem ist, dass die feste Position aus dem Video-Container herausfließt. Ich denke zuerst daran, einen Rand oben auf meiner Sektion hinzuzufügen, um meinen Inhalt unter das Video zu schieben, aber es würde nicht auf die Reaktionsfähigkeit wirken. Also drehte ich mich um, ohne eine Idee zu haben, es zu reparieren.

<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

Ich würde eine Javascript-Ansatz empfehlen.

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

Der obige Code wird Ihnen die Grundlagen dessen, was Sie tun müssen, die die iframe warten Höhe des ist, etwas zu werden, die von jQuery bestimmt werden kann und es dann auf den Abschnitt der Anwendung, die Sie nach unten drücken wollen . Es gibt keine Möglichkeit, dies mit CSS zu tun, wenn Sie versuchen, die Videoposition zu fixieren und den Rest der Seiteninhalte relativ oder statisch zu positionieren.

https://jsfiddle.net/5f0d8L1w/

(die js Geige nicht die reaktions iframe aber soll zeigen, wie feste und relativ zu vermischen positionierte Elemente Ihre HTML verwenden).