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?

You have not specified any dimensions for the actual `video` element at all as far as I can see, and at least my browser’s default stylesheet applies `object-fit: contain;` to video elements, so … — CBroe, Jul 09 '18 at 10:46
I am talking about the `video` element itself, not your `.video-container` div container. — CBroe, Jul 09 '18 at 10:54
@CBroe The "live" page is **[HERE](http://code-love.tk/demos/prop/studii.html)**. I have specified `width: 0;` for the videos. — Razvan Zamfir, Jul 09 '18 at 10:54
Well you would probably have to disable any automatically applied object-fit, and instead make the video dimensions adhere to those of their container element (the absolute positioning approach for “responsive iframes” should work for that.) — CBroe, Jul 09 '18 at 10:58
More info on how the responsive iframes techniue works can be found here https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/ or here https://benmarshall.me/responsive-iframes/ — CBroe, Jul 11 '18 at 08:44
I did not say you should use iframes, I said you should use the same technique … — CBroe, Jul 11 '18 at 09:14
Sorry, are you asking how to animate only the width of the videos but not the heights? — Steven Lambert, Jul 12 '18 at 15:49
Is the height of the video known when you create the carousel? If so, does adding a fixed height attribute to each video element do what you want? — Steven Lambert, Jul 12 '18 at 17:20
How about the carousel itself, does it have a fixed height or will it grow to the max height of any video used? — Steven Lambert, Jul 12 '18 at 17:40
@StevenLambert The carousel it is 100% of the view-port height.The "live" page is **[HERE](http://code-love.tk/demos/prop/studii.html)**. — Razvan Zamfir, Jul 12 '18 at 19:16

score 1 · Answer 1 · answered Jul 17 '18 at 06:54

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

Alisher Nasrullayev · Accepted Answer · 2018-07-17T07:19:15.797

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>

Downvoted because you only posted code. Explain your answer and mention me with @ and I will remove the downvote. — Douwe de Haan, Jul 17 '18 at 07:18
Sorry, @DouwedeHaan. I forgot to explain, and now I have corrected it — Alisher Nasrullayev, Jul 17 '18 at 07:26
@AlisherNasrullayev Please have a look at **[THIS question](https://stackoverflow.com/questions/51343571/jquery-eliminate-white-screen-pause-between-animations)** too. — Razvan Zamfir, Jul 17 '18 at 08:40

score 0 · Answer 3 · answered Jul 13 '18 at 18:09

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% */
 }

CSS transitions: smoothly animating the widths of videos fails

3 Answers3