NeoSketo NeoSketo - 7 months ago 29
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.

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


here is my jsfiddle:
https://jsfiddle.net/neosketo/3odjmxd1/5/

Answer

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 https://jsfiddle.net/6cgm8ybq/1/

These are the changes I made:

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