Youtube視頻5 * 5與CSS的馬賽克？

我剛剛開始學習Html和CSS，我有一個網站的想法，您可以在其中輸入youtube鏈接，並在背景上以視頻的形式在5 * 5鑲嵌中顯示視頻。它沒有任何用處，但我真的想要做到！讓我解釋一下This is what I have right now這是我做過什麼Youtube視頻5 * 5與CSS的馬賽克？

img#bgimg { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    background-size: cover; 
 
} 
 
\t 
 
\t 
 
.stick { 
 
\t 
 
\t 
 
\t height:158px; 
 
\t width:280px; 
 
\t line-height: 0; 
 

 

 
    
 
} 
 
.center{ 
 
\t 
 
\t height:158px; 
 
\t width:280px; 
 
\t display: inline-flex; 
 
}

<html> 
 
<head> 
 
<title>schema</title> 
 
<link rel="stylesheet" type="text/css" href="schema.css"> 
 
</head> 
 
<body> 
 
<img id="bgimg" > 
 
<source src=""> 
 
</img> 
 
<div> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="center" src="7.jpg"></img> 
 
\t <img class="center" src="8.jpg"></img> 
 
\t <img class="center" src="9.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="center" src="12.jpg"></img> 
 
\t <img class="center" src="13.jpg"></img> 
 
\t <img class="center" src="14.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="center" src="17.jpg"></img> 
 
\t <img class="center" src="18.jpg"></img> 
 
\t <img class="center" src="19.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t <img class="stick" src="black.jpg"></img> 
 
\t </div> 
 
</body> 
 
</html>

我試圖用對ALIGN =「中心」，中心的一切，但我想如果可能的話也7/8/9使用CSS/12/13/14/17/18/19廣場是一個大廣場，但我沒有設法做到這一點。所有其他方塊應該是視頻也我該怎麼做？感謝

來源

2016-10-22 ItsMe Atd

你想這個代碼

<html> 
<head> 
<style> 

.center{ 
    margin:50px 50px 0px 50px; 
    height:158px; 
    width:280px; 
    display: inline-flex; 
} 
</style> 
<title>schema</title> 
<link rel="stylesheet" type="text/css" href="schema.css"> 
</head> 
<body> 
<div class="center"> 
    <video width="400" controls> 
<source src="mov_bbb.mp4" type="video/mp4"> 


    </video> 
    </div> 
</body> 
</html>

來源

2016-10-22 10:33:14

這已經更好！我怎樣才能做出一個馬賽克呢？中間那個呢？ –

Youtube視頻5 * 5與CSS的馬賽克？

回答

相關問題