解决uni-app视频组件h5手机端全屏后无法横屏播放的问题

最近接到需求要做一个内嵌到手机游戏里的web视频播放器，一个视频列表加一个播放页面。

很简单，一会就做好了。

但是遇到了一个问题却困扰了很久，uni-app的video组件在手机端全屏播放视频时居然无法根据视频尺寸自动横竖屏切换，看官方文档也说不支持

 网上找到的解决方案都是说通过css来控制视频组件的宽高，tranform属性来手动进行横竖屏切换，例如这篇文章

uniapp 中 H5端 使用 video 使其全屏横屏播放

有兴趣的同学可以参考自己做做，效果还是挺可以，但是由于手机端分安卓和ios端，安卓端还有各种屏幕适应性问题，使用时兼容性很差，搞得很头疼，我在手机模拟器里试了就出现问题了，横屏并且全屏后整个网页居然向上移动了一段距离，难搞哦！

后来看了下网上其他人写的视频网站手机端播放可以正常横竖屏全屏，于是看了下他们用的原来是iframe，顿时茅舍顿开啊，直接用iframe确实好用，自带了横竖屏切换，手机端和模拟器里切换也是正常的！而且代码非常简单，如下

<!--uni-app的video组件以及h5的video组件手机h5端播放视频无妨横屏，坑！-->
<!--直接使用iframe播放，可以自由横竖屏切换啦-->
<template>
	<iframe :src="url" class="video-box" :allowfullscreen="true" :border="0"></iframe>
</template>