NeoSketo NeoSketo - 1 year ago 126
Javascript Question

how to crop a video in bootstrap carousel

I am having an issue with placing a HTML5 video in a bootstrap carousel.
My carousel is supposed to take up 90% of the screen so that it is responsive.

I am trying to place a video in carousel with a width of roughly 200% (H x W) of its size, so that i can use a div to crop it with

overflow hidden
to 90% of the screen.

But my div shows the whole video, and its not responsive. I can figure out why.


<!-- 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>
<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="" type="video/webm">
<source src="" type="video/mp4" />
Your browser does not support the video tag.

<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>
<!-- /.carousel -->


#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%;
height: 200%;
background-size: cover;
overflow: hidden;
z-index: 1000;
width: 100%;
height: 90%;
overflow: hidden
.item {
height: inherit;

here is my jsfiddle:

Answer Source

If you're trying to get the carousel to be 90% of the height of the page, I don't see that applied anywhere. You're applying a 90% height to the cropped video div, you'll want to apply this to your actual carousel. You'll also need to apply a height to the <body> and <html> tags so that the 90% is based off of the full page height.

See an updated fiddle here

These are the changes I made:

html {
  height: 100%;
#myCarousel {
  height: 90%;
  overflow: hidden;
  width: 100%;
  /* height: 90%; */
  /* overflow: hidden */