在滑块中安装视频(Bootstrap 4.0) [英] fitting video in slider (Bootstrap 4.0)

查看：43
本文介绍了在滑块中安装视频(Bootstrap 4.0)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于我的学校，我必须创建一个带有视频滑块的网站.我选择使用Bootstrap 4.0.到目前为止，我从中获得了一个模板，并试图将视频放在其中的一个滑块上.不幸的是，视频无法完整显示.我想让它适合滑块.(当然，在视频的左右两侧只有向右或向左滑动的箭头)现在看起来像这样:所以在整个宽度上，但是在高度上看不到任何东西

For my school I have to do a website with a video slider. I chose to work with bootstrap 4.0. So far I got a template from it and tried to put a video inside it on one of the sliders. Unfortunately the video won't be shown full. I would like to have it fitting in the slider. (and of course that in the left and in the right of the video will be only the arrows to slide right or left) Right now it looks like that: So in the width its full, but the height you cant see anything

我想拥有的是:它适合其整个宽度和高度的滑块.如果您缩放窗口，则白色块应该变小

这是我正在使用的代码:

Here is the code I'm using:

/*!
 * 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>

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

Thank you for your help, and just tell me if you need to know something more :)

推荐答案

首先，您需要修复布局.主体的所有内容都应位于容器，行和 col-12 中.

First you need to fix your layout. All the content of the body should be inside a container, row, and col-12.

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

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

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

All of the carousel related code should go inside the col-12. Doing so, the carousel's width is the same as that of the nav, and there are free space on both sides of it.

控制器位于绝对位置.他们的两个父母位于 relative .如果您没有足够的CSS定位信息，请阅读此帖子.

The controllers are positioned absolute. Two of their parents are positioned relative. If you do not have enough information on CSS positioning, read this post.

有几种方法可以将控制器移到转盘之外.

There are a couple of ways to get the controllers outside of the carousel.

  1. 将两个控制器代码放在容器下方.

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

  1. 将上述所有代码放入带有 position-relative 类的另一个元素中.
  1. Put all the above code inside an another element with position-relative class.

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

选中此笔

使用以下代码覆盖轮播的 position 属性和 col-12 .它们相对定位.

Override the position property of carousel and the col-12 using the code below. They are relatively positioned.

.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 具有全宽，并且控制器处于绝对位置，因此控制器位于全角 div.

Now, since the div with position-relative class has full width and the controllers are absolutely positioned, the controller are inside the full-width div.

选中此笔

这篇关于在滑块中安装视频(Bootstrap 4.0)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆