此視頻佈局的最佳解決方案是什麼？

Question

我正在WordPress中建立一個網站，其中有一個網頁4個視頻。

（請見截圖）

上方的大型視頻是自己的視頻，所以是三個下方。

我希望能夠點擊下面的一個較小的視頻，然後替換頂部的視頻，然後頂部的視頻下降到我剛纔點擊的視頻。

這有道理嗎？

請有人告訴我他們將如何實現這一目標。

謝謝！

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>