1
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
background-size: cover;
position: relative;
overflow: hidden;
background: #000;
color: #000;
text-align: center;
font-family: Arial, san-serif;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .677em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2E353B;
}
h1 {
font-size: 300%;
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
}
.slide-one {
background-image: url('jupiter.jpg');
}
.slide-two {
background-image: url('neptune.jpg');
}
.slide-three {
background-image: url('mars.jpg');
}
.slide-four {
background-image: url('moon.jpg');
}
[id^="slide"]:checked+.slide {
left: 0;
z-index: 100;
}
video {
z-index: 10000;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Horizontal Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=" 1 "/>
<link rel="stylesheet " type="text/css " href="main1.css " />
</head>
<body>
<div class="wrap ">
<header>
<label for="slide-1-trigger ">Slide One</label>
<label for="slide-2-trigger ">Slide Two</label>
<label for="slide-3-trigger ">Slide Three</label>
<label for="slide-4-trigger ">Slide Four</label>
</header>
<input id="slide-1-trigger " type="radio " name="slides " checked/>
<section class="slide slide-one ">
<h1>Headline One</h1>
<video width="250 " height="170 " controls>
\t \t \t <source src="jupitergif.webm " type="video/webm ">
\t \t \t </source>
\t \t \t </video>
</section>
<input id="slide-2-trigger " type="radio " name="slides " />
<section class="slide slide-two ">
<h1>Headline Two</h1>
</section>
<input id="slide-3-trigger " type="radio " name="slides " />
<section class="slide slide-three ">
<h1>Headline Three</h1>
</section>
<input id="slide-4-trigger " type="radio " name="slides " />
<section class="slide slide-four ">
<h1>Headline Four</h1>
</section>
</div>
</body>
</html>我有麻烦造型的视频，以便它是在页面的右下角。另外，我怎样才能使视频在一个循环自动播放？另外，如何摆脱视频上的任何播放/最大化图标？该视频在部分级幻灯片幻灯片1中。非常感激。
从您的视频标签 '控制'。添加'循环'来循环播放视频。另外，我没有在您的代码片段中看到加载视频。 – cosmoonot
@cosmoonot视频不在代码片段中加载，因为它是本地文件。感谢您告诉我删除控件。添加循环不起作用。另外我怎样才能在右下角获得视频？ –