CSS transitions: smoothly animating the widths of videos fails

Question

I have made a horizontal carousel of videos (and captions) using Twitter Bootstrap 4, the perfect-scrollbar plugin and some custom CSS.

My goal is to animate the width of the videos from 0 to 100%, with a smooth transition. I want to animate the width only but the height also gets animated. The code I have written so far:

if ($('#carousel').length > 0) {
    var ps = new PerfectScrollbar('#carousel', {
        useBothWheelAxes: true,
        maxScrollbarLength: 100
    });

    $('.video-box').each(function() {
        var vid = $(this).find('video');
        vid.closest('.video-container').addClass('loaded');
        vid.hover(function() {
            $(this).get(0).play();
        }, function() {
            $(this).get(0).pause();
        })
    });
}

.hero {
  height: 100vh;
  background: #111;
}
#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0;
	flex-shrink: 0;
	position: relative;
}
#carousel li a {
  text-decoration: none;
  color: #fff;
  display: block;
}
#carousel li .video-container video {
  transition: width 1s ease-in-out;
  width: 0;
  height: 100%;
}
#carousel li .video-container.loaded video {
  width: 100%;
}
#carousel li .caption {
  padding: 20px 20px 0 20px;
}
#carousel li h2 {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel li p {
  font-size: 9px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 40% 10vh 40%;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code-love.tk/demos/prop/lib/js/perfect-scrollbar.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code-love.tk/demos/prop/lib/css/perfect-scrollbar.css" />
<div class="hero carousel-container d-flex">
  <ul id="carousel">
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="caz.html">
        <div class="video-container">
          <video src="//code-love.tk/video/commerciala.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem ipsun dolor</h2>
          <p>A true story</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <div class="video-container">
          <video src="//code-love.tk/video/commerciala.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <div class="video-container">
          <video src="//code-love.tk/video/flamenco.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit.</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <video src="//code-love.tk/video/koffee.mp4" loop muted></video>
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
      </a>
    </li>
  </ul>
</div>

The "live" page is HERE. What am I doing wrong? What shall I do with the videos?

Answer 1

I think, you should wrap <video src="//code-love.tk/video/koffee.mp4" loop muted></video> with <div class="video-container"></div> like this:

<div class="video-container">
   <video src="//code-love.tk/video/koffee.mp4" loop muted>
</div>

if ($('#carousel').length > 0) {
    var ps = new PerfectScrollbar('#carousel', {
        useBothWheelAxes: true,
        maxScrollbarLength: 100
    });

    $('.video-box').each(function() {
        var vid = $(this).find('video');
        vid.closest('.video-container').addClass('loaded');
        vid.hover(function() {
            $(this).get(0).play();
        }, function() {
            $(this).get(0).pause();
        })
    });
}

.hero {
  height: 100vh;
  background: #111;
}
#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0;
	flex-shrink: 0;
	position: relative;
}
#carousel li a {
  text-decoration: none;
  color: #fff;
  display: block;
}
#carousel li .video-container video {
  transition: width 1s ease-in-out;
  width: 0;
  height: 100%;
}
#carousel li .video-container.loaded video {
  width: 100%;
}
#carousel li .caption {
  padding: 20px 20px 0 20px;
}
#carousel li h2 {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel li p {
  font-size: 9px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 40% 10vh 40%;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code-love.tk/demos/prop/lib/js/perfect-scrollbar.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code-love.tk/demos/prop/lib/css/perfect-scrollbar.css" />
<div class="hero carousel-container d-flex">
  <ul id="carousel">
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="caz.html">
        <div class="video-container">
          <video src="//code-love.tk/video/commerciala.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem ipsun dolor</h2>
          <p>A true story</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <div class="video-container">
          <video src="//code-love.tk/video/commerciala.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <div class="video-container">
          <video src="//code-love.tk/video/flamenco.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit.</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
      <div class="video-container">
        <video src="//code-love.tk/video/koffee.mp4" loop muted></video>
       </div>
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
      </a>
    </li>
  </ul>
</div>

Answer 2

You can use a pure JS fix for this. Something like:

var curWidth = $(this).width();
$(this).css('width', 'auto');
var autoWidth = $(this).width();

$(this).width(curWidth).animate({
    width: autoWidth
}, 500);

This snippet basically sets the width from 0 to auto, saves the value to a variable and resets the width back to 0 before animating back to the elements auto width. It is my usual go to for animating widths or heights from 0 to auto.

Along with this bit of css:

.video-container video {
    width: 0;
}

Answer 3

Declare the height and mark both important for the video itself. This will distort the video's aspect ratio though. Not sure why you would want to do this to video but I'm pretty sure this will work.

video {
   width: 100%; !important
   height: 100%; !important /* or whatever you want the height to be doesn't have to be 100% */
 }