CSS to crop top and bottom of a video

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
1 year ago
I have a small video on index.cshtml and is performing very good, I need to crop top and bottom of the video using CSS, this is the style I using now:
<style>
.video-banner {
  position: relative;
  z-index: 0;
  background: #fff url('loading.gif') 50% 50% no-repeat;
  width: 100vw;
  left: calc(-50vw + 50%);
  max-height: 670px;
  overflow: hidden;  
}  
</style>


But is just cropping the bottom part, how can I crop top and bottom to center the video.
THX
1 year ago
You Can use this CSS code for center a video


body {
  margin: 0;
  padding: 0;
}

.video-banner{
  
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  
  background: #fff;
  
  overflow: hidden;
  clip-path: 0 0;
  transform: translatez(0);
}

video{
  transform: translatez(0);
  position: absolute;
  top: -100%;
  bottom: -100%;
  left: -100%;
  right: -100%;    

  margin: auto;
  
/* here You can control your video height width */
  min-width: 50%;
  min-height: 50%;
}
1 year ago
Thanks Hasan, I don't want to center the video, I just want to crop top and bottom, this style is working but is just cropping the bottom
 <style>
.video-banner {
  position: relative;
  z-index: 0;
  background: #fff url('loading.gif') 50% 50% no-repeat;
  width: 100vw;
  left: calc(-50vw + 50%);
  max-height: 670px;
  overflow: hidden;
  
}
  
</style>  


Thank You!
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.