Animate video width only from 0 to 100%

[Ajax30]

I have a video and I want to animate ists width only from 0 to 100%. The problem is that the height is resized proportionally.

.video-container {
    height: 300px
}
video {
    width: 200px;
    background: red;
    -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 4s;
}
video:hover {
  width: 300px;
}

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

What shall I do?

[Paulie_D]

Why would you want the video to be not propostional?

[Paulie_D]

Hovever, a transform would seem to be more what you are after

https://codepen.io/Paulie-D/pen/EpamrW

[Ajax30]

The issue is described in detail HERE. In short: I want my videos to “enrer” the same way as the ones on THIS page.

[Beverleyh]

Yes, they’re doing it with transform – you can inspect the CSS in the developer console and even grab their cubic-bezier timings https://codepen.io/anon/pen/EpaQLg

Note that they’re not touching the width – the videos are just sliding in from the side.

[Ajax30]

Hi! Great answer! There are reputation points to be earned for the detailed version of this question on Stackowerflow. Please answer there too. You will earn the points and help more people. :)

[Author]

Posts