视频播放时更改视频大小？

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>

这可行，唯一的问题是当我单击“播放”按钮时视频不会变大。所以我想我要么将相同的功能应用于“播放”按钮，要么将该功能标记为视频开始播放的时间。

谢谢

Answer 1

请像视频标签本身一样提及高度和宽度-

Answer 2

土豆呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜