divを展開するときに下の要素をすべて押し下げるにはどうすればいいですか？

Question

ボタンをクリックすると拡大する動画iframeがあります。これは100vhの高さ（フルスクリーン）のページのヘッダーの内側に含まれています。ビデオが展開されると、ヘッダー内の残りのコンテンツがプッシュされ、ヘッダー内のすべてのコンテンツが垂直方向にセンタリングされます。代わりに、ヘッダーdivの高さを100vhとビデオの高さに100vhを超えて増加させたいと思います。しかし、これまでのコードは動作していません。 .header__content--containerの

LINK TO PAGE

$(document).ready(function(){ 
 
    $(".video").click(function() {  
 
     $(".header").height("+=315"); 
 
     document.getElementById("video__player").style.maxHeight = "50vw"; 
 
     
 
     document.getElementById("video-btn").style.display = "none";  
 
    }); 
 
});

.header {height: 100vh; width: 100vw;} 
 

 
.header__content {height: calc(100vh); width: 100%; display: flex; display: -webkit-flex;} 
 
.header__content--container {margin: auto; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column;} 
 
.video__container {text-align: center;} 
 
.video {color: gray; width: 100%; height: auto;} 
 
.play-btn {width: 20px; height: 20px; vertical-align: middle;} 
 
.video__player {overflow: hidden; width: 300px; max-height: 0px; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}

<div class="header" id="header"> 
 
       
 
       <div class="header__menu"> 
 
        <div class="header__menu--left"> 
 
         <div class="logo"> 
 
          <img class="logo__full img__full" src="assets/kbd-logo-english.svg"> 
 
          <img class="logo__mobile img__full" src="assets/kbd-logo-mobile.svg"> 
 
         </div> 
 
        </div> 
 
        <div class="header__menu--right"> 
 
         <div class="phone"> 
 
          <h9 class="strong" style="color: #5CBDE1;">1-855-636-0002</h9> 
 
         </div> 
 
         <a class="quote menu__quote clickable" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0;"> 
 
          <h8 class="strong" style="margin: auto;">Get your quote</h6> 
 
         </a> 
 
         <div class="language"> 
 
          <h9 class="clickable strong" style="color: #5CBDE1;">FR</h9> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       
 
       <div class="header__content"> 
 
        <div class="header__content--container animatedParent animateOnce"> 
 
         <h1>Hi, we're KBD Insurance.</h1> 
 
         <br> 
 
         <h2 class="text__center">Life is chaotic. Insurance doesn't have to be.</h2> 
 
         <br><br> 
 
         <div class="quote__wrapper header__quote--wrapper"> 
 
          <a class="quote menu__quote clickable animated fadeInDownShort slow" href="https://pt.atrium-uw.com/Quote?Id=81" style="margin: 0; height: 60px;"> 
 
           <h8 class="strong" style="margin: auto;">Get your quote</h6> 
 
          </a> 
 
         </div> 
 
         <br><br> 
 
         <div class="video__container animated fadeInDownShort slow"> 
 
          <a class="h6 video clickable" id="video-btn">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a> 
 
         </div> 
 
         <div class="video__player" id="video__player"> 
 
          <iframe src="https://www.youtube.com/embed/SIaFtAKnqBU" frameborder="0" allowfullscreen></iframe> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       
 
      </div>

Answer 1

marginは、現在autoに設定されています。例えば、300pxのようなハードコーディングされた値にマージンを変更すると、それはあなたが望むように動作します。

EDIT：要求された機能

function setMarginTop() { 
    const $header = $(".header__content--container"); 
    const marginTop = $header.css("margin-top"); 
    $header.css("margin-top", marginTop); 
}