Skip to main content

Forums

This topic contains 5 replies, has 3 voices, and was last updated by  Ajax30 7 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #273923

    Ajax30
    Participant

    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?

    #273925

    Paulie_D
    Moderator

    Why would you want the video to be not propostional?

    #273926

    Paulie_D
    Moderator

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

    #273930

    Ajax30
    Participant

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

    #273934

    Beverleyh
    Participant

    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.

    #273935

    Ajax30
    Participant

    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. :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star