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的马赛克？

回答

相关问题