Question

我遇到将HTML5视频放入bootstrap轮播中的问题。我的旋转木马应该占据屏幕的90％，以便它具有响应性。

我正在尝试将视频放在宽度约为其大小的200％（高x宽）的轮播中，以便我可以使用div将其裁剪为overflow hidden到屏幕的90％

但我的div显示整个视频，而且没有响应。我可以弄明白为什么。

HTML

<!-- Carousel.
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="background: none;">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner ">
            <div class="item active">
            <div class="croppedvideo">
                <video class="videoInsert" autoplay loop poster="~/Content/video/posters/b-roll-1.jpg" muted>
                    <source src="https://broken-links.com/tests/media/BigBuck.webm" type="video/webm">
                    <source src="https://broken-links.com/tests/media/BigBuck.m4v" type="video/mp4" />
                    Your browser does not support the video tag.
                </video>
            </div>
            </div>



        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
    <!-- /.carousel -->

CSS

#myCarousel {
    overflow: hidden;
}
.videoInsert {
    position: relative;
    -webkit-transform: translateZ(0);
    right: 0; 
    bottom: 0;
    top: 0;
    left: 0;
    margin-top: 0;
    min-width: 100%; 
    min-height: 100%;
    width:200%;
    height: 200%; 
    background-size: cover;
    overflow: hidden;
    z-index: 1000;
}
.croppedvideo{
  width: 100%;
    height: 90%;
    overflow: hidden
}
.item {
  height: inherit;
}

这是我的jsfiddle： https://jsfiddle.net/neosketo/3odjmxd1/5/

Answer 1

如果你试图让旋转木马达到页面高度的90％，我就不会在任何地方看到它。您对裁剪的视频div应用了90％的高度，您将要将其应用于您的实际轮播。您还需要在<body>和<html>标记上应用高度，以便90％基于整页高度。

请在此处查看更新的小提琴https://jsfiddle.net/6cgm8ybq/1/

以下是我所做的更改：

body,
html {
  height: 100%;
}
#myCarousel {
  height: 90%;
  overflow: hidden;
}
.croppedvideo{
  width: 100%;
  /* height: 90%; */
  /* overflow: hidden */
}

如何在bootstrap轮播中裁剪视频

1 个答案: