このビデオレイアウトに最適なソリューションは何ですか？

Question

私はワードプレスでウェブサイトを構築しています。このウェブサイトにはの4ビデオというページがあります。

（スクリーンショットを参照してください）

トップ大きなビデオは、独自のビデオで、その3の下にあります。

下の小さい動画の1つをクリックして、上の動画を置き換えたい場合は、一番上にあった動画がクリックされたところに移動します。

それは意味がありますか？

誰かがこれを達成する方法について私にアドバイスできますか？

ありがとうございました！

Answer 1

多分これは便利です。ここでPがVIDEO

$(".videos figure").not(":first").click(function() { 
 
    
 
    var elem = $(this), 
 
     container = $(".videos"), 
 
     target = container.find("figure").first(), 
 
     targetContent = target.html(), 
 
     thisContent = elem.html(); 
 
    
 
    target.html(thisContent); 
 
    elem.html(targetContent); 
 
    
 
});

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/* simple flexbox layout */ 
 

 
section { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
     -ms-flex-wrap: wrap; 
 
      flex-wrap: wrap; 
 
    padding: 2em; 
 
} 
 
section figure { 
 
    background-color: silver; 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 0 33.3334%; 
 
     -ms-flex: 0 0 33.3334%; 
 
      flex: 0 0 33.3334%; 
 
} 
 
section figure:nth-child(1) { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1 1 100%; 
 
     -ms-flex: 1 1 100%; 
 
      flex: 1 1 100%; 
 
} 
 

 
/* just for visual styling */ 
 

 
section figure p { 
 
    box-shadow: 0 0 0 0.125em white; 
 
    padding: 2em; 
 
} 
 
section figure p.one { 
 
    background-color: yellow; 
 
} 
 
section figure p.two { 
 
    background-color: pink; 
 
} 
 
section figure p.three { 
 
    background-color: orange; 
 
} 
 
section figure p.four { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section class="videos"> 
 
    <figure> 
 
    <p class="one"> 
 
     1 
 
    </p> 
 
    </figure> 
 
    <figure> 
 
    <p class="two"> 
 
     2 
 
    </p> 
 
    </figure> 
 
    <figure> 
 
    <p class="three"> 
 
     3 
 
    </p> 
 
    </figure> 
 
    <figure> 
 
    <p class="four"> 
 
     4 
 
    </p> 
 
    </figure> 
 
</section>