Нужно разместить видео в 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();
})
})
