Change size of video when video is playing?

Question

I am having a terrible time trying to figure out this when I'm sure it should be quite easy. So, I have a video on a website I am developing. I would like this video to resize to a different CSS (a bigger width/height) when it starts playing and resize back to normal (removing the CSS) when it pauses. How do I do this? I have tried jQuery with toggling function by adding/removing CSS. However the resize happens when clicked, whereas I would like to have it when it starts playing. Is there a way to do that?

The code is

<section>

<video controls preload="metadata" onclick="this.paused ? this.play() : this.pause();">
</video>

</section>

CSS

section video {
    float: left;
    width: 50%;
    max-height: auto;
}

.largevideo {
    float: left;
    width: 100%;
    max-height: auto;
}

<script>

$(document).ready(function(){
    $("section video").click(function(){
        $("section video").toggleClass("largevideo");
    });
});

</script>

This would work, the only problem is that when I click the 'play' button the video does not get bigger. So I guess I either apply the same function to the 'play' button or I tag the function to when the video starts playing.

Thanks

Possible duplicate of [How to resize video when video starts/stops?](http://stackoverflow.com/questions/38350022/how-to-resize-video-when-video-starts-stops) — Alessio, Jul 13 '16 at 15:11

score 0 · Answer 1 · answered Jul 04 '22 at 07:00

0

please mention height and width like in video tag itself-

answered Jul 04 '22 at 07:00

Priyanka kumari

1

– Priyanka kumari Jul 04 '22 at 07:01
1

Your answer could be improved by providing an example of the solution and how it helps the OP. – Tyler2P Jul 04 '22 at 15:38

Change size of video when video is playing?

1 Answers1