Forums

Give help. Get help.

  • # July 11, 2018 at 3:25 am

    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?

    # July 11, 2018 at 4:43 am

    Why would you want the video to be not propostional?

    # July 11, 2018 at 4:46 am

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

    # July 11, 2018 at 5:49 am

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

    # July 11, 2018 at 7:59 am

    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.

    # July 11, 2018 at 8:37 am

    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-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag