javascript - ビデオの再生中にビデオのサイズを変更しますか?

Question

私はそれが非常に簡単であるべきだと確信しているときに、これを理解しようとしてひどい時間を過ごしています。だから、私は開発中のウェブサイトにビデオを持っています。このビデオの再生開始時に別の CSS (より大きな幅/高さ) にサイズ変更し、一時停止時に通常のサイズに戻す (CSS を削除する) ことを希望します。どうすればいいですか？CSSを追加/削除することでトグル機能を備えたjQueryを試しました。ただし、クリックするとサイズ変更が行われますが、再生を開始したときにサイズ変更したいと思います。それを行う方法はありますか？

コードは

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

これは機能しますが、唯一の問題は、「再生」ボタンをクリックしてもビデオが大きくならないことです。したがって、同じ関数を「再生」ボタンに適用するか、ビデオの再生開始時に関数にタグを付けると思います。

ありがとう