Question

我有全屏视频背景，但是我不知道如何用youtube视频实现相同的效果。此外，我想保留youtube图标和播放/暂停动画，而不显示进度栏和所有这些按钮。这是一个示例（向下滚动直到找到全屏youtube视频）：

当前代码：

body{
  margin:0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size:1rem;
  font-weight:normal;
  line-height:1.5;
  color:#333;
  overflow-x:hidden;
}

.v-header{
  height:100vh;
  display:flex;
  align-items:center;
  color:#fff;
}

.container{
  max-width:960px;
  padding-left:1rem;
  padding-right:1rem;
  margin:auto;
  text-align:center;
}

.fullscreen-video-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen-video-wrap video{
  min-height:100%;
  min-width:100%;
  object-fit: cover;
}

.header-overlay{
  height:100vh;
  position: absolute;
  top:0;
  left:0;
  width:100vw;
  z-index:1;
  background: none;
  opacity:0.85;
}

<header class="v-header container video-display" onclick="myFunction()">

<div class="fullscreen-video-wrap" >

<video src="{% static "video.mp4" %}" autoplay muted loop id="myVideo">
</video>
...
</header>

Answer 1

我相信您会在这里找到一个非常简单的答案.......它已经完成并且可以工作。

因此，仅使用该示例并进行调整即可满足您的需求。

error picture

这是该页上的代码。......

    <div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ? 
     controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" 
      allowfullscreen></iframe>
     </div>
     </div>

<div id="vidtop-content">
<div class="vid-info">
      <h1>YouTube Fullscreen Background Demo</h1>
      <p>The International Space Station orbits the Earth every 92 minutes, with its crew seeing a sunrise 15 times a day. It exists as a scientific, educational, and engineering platform in low orbit, 330 to 435 kilometres above the Earth.
     <p>Original timelapse by Riccardo Rossi (ISAA), used under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Raw photos courtesy of http://eol.jsc.nasa.gov/
     <a href="/500/Use-YouTube-Videos-as-Fullscreen-Web-Page-Backgrounds">Full article</a>
  </div>
</div>

嵌入YouTube视频全屏背景

1 个答案: