如何将视频设置为一半页面的背景答案

【问题标题】：How to set a Video as a background for half the page如何将视频设置为一半页面的背景
【发布时间】：2019-07-24 23:51:02
【问题描述】：

我想知道是否可以将视频背景设置为主页屏幕的一半。

我目前正在使用Bootstrap 4的网格系统来分离页面和html5来设置视频。

<div class="container-fluid">
    <div class="row">
        <div id="leftcontainer" class="col-md-6">
            <div id="video">
                <video class"video-fluid z-depth-1" autoplay loop muted width="100%">
                    <source src="videos/backgroundVid2.mp4" type="video/mp4" />
                </video> 
                <button>Download Brochure</button>
                <button>Contact Us</button>
            </div>
        </div>
    </div>
</div>

当我运行代码时，我得到的视频无法正确放入容器中，并且无法响应屏幕大小的变化。

【问题讨论】：

欢迎来到 StackOverflow。请编辑您的问题并展示您的 CSS 并生成一个工作示例。谢谢
jsfiddle.net/t6fcdsu9

标签： html css bootstrap-4

【解决方案1】：

我无法真正读出您到底想要什么，但这是一个关于使用 youtube 视频的响应性的工作小提琴（没有显示，我认为它被阻止了）：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid px-0">
    <div class="row">
        <div class="col-md-6">
            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/HTEX0qaSY3U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <button>Download Brochure</button>
            <button>Contact Us</button>
        </div>
    </div>
</div>

如果这不是您想要的，请详细说明您的问题。

您也可以通过仅将 iframe 替换为您的视频标签来达到相同的效果 - 但无法测试它。

【讨论】：

【解决方案2】：

我认为你可以这样做......

如果您向我们提供 CSS 和 Javascript，那么我们将为您提供更多帮助...

来源：W3schools

// Get the video
var video = document.getElementById("myVideo");

// Get the button
var btn = document.getElementById("myBtn");

// Pause and play the video, and change the button text
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}

/* Style the video: 100% width and height to cover the entire window */

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}


/* Add some content at the bottom of the video/page */

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}


/* Style the button used to pause/play the video */

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="https://ak8.picdn.net/shutterstock/videos/16923118/preview/stock-footage-rain-and-light-on-window-of-moving-vehicle-modern-travel-concept.webm" type="video/mp4">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
  <!-- Use a button to pause/play the video with JavaScript -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

希望对你有帮助……

【讨论】：