Javascript-форум - Как видео разместить по очереди html

Нужно разместить видео в html по очереди на весь экран
А не в одну линию вниз может кто знает вот код
Должно быть так

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">	
	<title>title</title>
  	<link rel="stylesheet" href="style.css">


</head>
<body>



	 <video> <source src="1.mp4"> </video>	
	 <video> <source src="2.mp4"> </video>	
         
	 
	 
	 
    <a href="#" id="loadMore"LoadMore</a>


     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	 <script src="script.js"></script>
</body>
</html>

style.css

body{
	background: #f6f6f6;
	margin: 20px auto;
	font: normal 13px/100% sans-serif;
	color:#444;
}
video{
	display: none;
	padding: 10px;
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: #fff;
	box-shadow: 0 1px 1px #ccc;
	margin-bottom: 5px;
	background-color: #f1f1f1;
}
a, a:visited{
	color: #33739E;
	text-decoration: none;
	display: block;
	margin: 10px 0;
}
#loadMore{
	padding: 10px;
	text-align: center;
	background-color: #33739E;
	color: #fff;
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: #fff;
	box-shadow: 0 1px 1px #ccc;
	transition: all 600ms ease-in-out;
}

#loadMore:hover{
	background-color: #fff;
	color: #33739E;
}

script.js

$(function(){
	$("video").slice(0, 4).show();
	$("#loadMore").on('click', function(e){
		e.preventDefault();
		$("video:hidden").slice(0, 4).slideDown();
	})
})