Question

＆＃13;

 spec:
  containers:
  - args:
    - -v=9

＆＃13;

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;
}

＆＃13;

我无法设置视频样式，因此它位于页面的右下角。另外，如何在循环中制作视频自动播放？另外，如何摆脱视频中的任何播放/最大化图标？该视频位于分段类幻灯片中。非常感激。

Answer 1

将autoplay和loop属性添加到<video>并删除controls。没有结束标记的<source> void元素 ~~＆lt; / source＆gt;~~

<video width="250" height="170" autoplay loop>

要将视频放在右下角，请使用：

 video {
    z-index: 10000;
    position:fixed;
    bottom:0;
    right:0;
  }

BTW保持格式一致所有正确的引号都有空格，删除这些空格。

<强>段

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('https://pbs.twimg.com/profile_images/628266121313947648/Zk_c8qnD.jpg');
}

.slide-two {
  background-image: url('https://dperkins.org/gal/2014/thumb/2014-10-06.18.Neptune.jpg');
}

.slide-three {
  background-image: url('https://at-cdn-s01.audiotool.com/2011/10/04/documents/FHCjD1iBHjEiCESy8ubgBopVfNr/0/cover256x256-dd1bb728ff564ec69ededd71b2ba4ada.jpg');
}

.slide-four {
  background-image: url('https://is5-ssl.mzstatic.com/image/thumb/Purple71/v4/82/42/9a/82429a1b-a489-d421-5ec2-cb38613b54f4/source/256x256bb.jpg');
}

[id^="slide"]:checked+.slide {
  left: 0;
  z-index: 100;
}

video {
  z-index: 10000;
  position:fixed;
  bottom:0;
  right:0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Pure CSS Horizontal Slider</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</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" autoplay loop>
			<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/webm">
			</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 个答案: