关于移动端video-player点击播放自动全屏

最近一个需求，由于给定的视频资源是竖屏，而UI给定的设计图是横屏（竖屏不美观），导致最终定下的需求是：点击播放按钮，自动全屏播放。
至于为什么花了这么久，主要原因是开始感觉这个需求比较简单，完全可以直接使用video标签实现，不用插件，然而倒腾了半天，网上查了大堆资料，始终无法实现，具体原因目前仍不清楚，貌似跟浏览器内核有关？稍后继续研究去。

先上图

点击之后自动全屏

补充一下遇到的坑：

可以看到，播放器的高度大于封面高度，（本来是刚好的），这里有个地方的设置会影响播放器的高度，playerOptions中的aspectRatio，当设置为4:3的时候就是上图这样了，当时手欠给改了这里，结果找了半天原因。。。

代码：
vue怎么使用video-player这里就不详细说了，教程到处都是。

            
          

//data中的：
playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在