对于我的学校，我必须制作一个带有视频 slider 的网站。我选择使用 bootstrap 4.0。到目前为止，我从它那里得到了一个模板，并试图在其中一个 slider 上放一个视频。不幸的是，视频不会完整显示。我想让它适合 slider 。 (当然，在视频的左侧和右侧将只有向右或向左滑动的箭头) 现在它看起来像这样: So in the width its full, but the height you cant see anything

我想要的是: it fits in the slider with his whole width and height. if you scale the window, the white blocks should get smaller

这是我使用的代码:

/*!
 * Start Bootstrap - Half Slider (https://startbootstrap.com/template-overviews/half-slider)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-half-slider/blob/master/LICENSE)
 */

@charset "UTF-8";

/* Body */

body {
  width: 50%;
  margin: auto;
}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-item iframe {
  margin-top: 55px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tales {}

.iframe {
  max-height: 40% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>


<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Half Slider - Start Bootstrap Template</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/half-slider.css" rel="stylesheet">

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Fact Attack</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <header>
    <!--Carousel Wrapper-->
    <div id="video-carousel-example2" class="carousel slide carousel-fade" data-ride="carousel">
      <!--Indicators-->
      <ol class="carousel-indicators">
        <li data-target="#video-carousel-example2" data-slide-to="0" class="active"></li>
        <li data-target="#video-carousel-example2" data-slide-to="1"></li>
        <li data-target="#video-carousel-example2" data-slide-to="2"></li>
      </ol>
      <!--/.Indicators-->
      <!--Slides-->
      <div class="carousel-inner" role="listbox">
        <!-- First slide -->
        <div class="carousel-item active">
          <!--Mask color-->
          <div class="view">
            <!--Video source-->
            <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

            <div class="mask rgba-indigo-light"></div>
          </div>

          <!--Caption-->
          <div class="carousel-caption">
            <div class="animated fadeInDown">
              <h3 class="h3-responsive text-dark">Light mask</h3>
            </div>
          </div>
          <!--Caption-->
        </div>
        <!-- /.First slide -->

        <!-- Second slide -->
        <div class="carousel-item">
          <!--Mask color-->
          <div class="view">
            <!--Video source-->
            <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

            <div class="mask rgba-indigo-light"></div>
          </div>

          <!--Caption-->
          <div class="carousel-caption">
            <div class="animated fadeInDown">
              <h3 class="h3-responsive">Super light mask</h3>
            </div>
          </div>
          <!--Caption-->
        </div>
        <!-- /.Second slide -->

        <!-- Third slide -->
        <div class="carousel-item">
          <!--Mask color-->
          <div class="view">
            <!--Video source-->
            <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

            <div class="mask rgba-indigo-light"></div>
          </div>

          <!--Caption-->
          <div class="carousel-caption">
            <div class="animated fadeInDown">
              <h3 class="h3-responsive">Strong mask</h3>
            </div>
          </div>
          <!--Caption-->
        </div>
        <!-- /.Third slide -->
      </div>
      <!--/.Slides-->
      <!--Controls-->
      <a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      <!--/.Controls-->
    </div>
    <!--Carousel Wrapper-->
  </header>

  <!-- Page Content -->
  <section class="py-5">
    <div class="container">
      <h1>Half Slider by Start Bootstrap</h1>
      <p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the
        <code>half-slider.css</code> file.
      </p>
    </div>
  </section>

  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Your Website 2018</p>
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>

感谢您的帮助，如果您需要了解更多信息，请告诉我:)

最佳答案

首先，您需要修复您的布局。正文的所有内容都应位于 container、row 和 col-12 中。

<div class="container">
  <div class="row">
    <div class="col-12">

    </div>
  </div>
</div>

所有与轮播相关的代码都应该放在 col-12 中。这样做，轮播的宽度与 nav 的宽度相同，并且在它的两侧都有空闲空间。

Controller 定位在绝对。他们的两个 parent 被定位为relative。如果您没有足够的 CSS 定位信息，请阅读此 post .

有几种方法可以让 Controller 脱离轮播。

方法一

将两个 Controller 代码放在容器下面。

<div class="container">
  <div class="row">
    <div class="col-12">

    </div>
  </div>
</div>

<a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
  <span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

将上述所有代码放在另一个具有 position-relative 类的元素中。

<div class="position-relative">
  <div class="container">
    <div class="row">
      <div class="col-12">




      </div>
    </div>
  </div>

  <a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon bg-danger" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
    <span class="carousel-control-next-icon bg-danger" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

检查这个pen

方法二

使用下面的代码覆盖 carousel 的 position 属性和 col-12。它们相对定位。

.position-initial {
  position: initial !important;
}

<div class="postion-relative">
  <div class="container">
    <div class="row">
      <header class="col-12 position-initial">
        <!--Carousel Wrapper-->
        <div id="video-carousel-example2" class="carousel slide carousel-fade position-initial" data-ride="carousel">

        </div>
      </header>

    </div>
  </div>
</div>

现在，由于 position-relative 类的 div 具有全宽并且 Controller 是 absolutely 定位的，所以 Controller 位于 全 Angular div.

检查这个pen

关于html - 在 slider 中安装视频 (Bootstrap 4.0)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50317276/

html - 在 slider 中安装视频 (Bootstrap 4.0)

方法一

方法二

上一篇：html - 如何在不改变 CSS (Bootstrap 4) 比率的情况下将图像缩放到列宽？

下一篇：html - 响应式设计 - 将元素放置在相对位置