이 비디오 레이아웃에 가장 적합한 솔루션은 무엇입니까?

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>