H5 嵌套iframe并设置全屏

上图上代码

<template><view class="mp-large-screen-box"><view class="mp-large-screen-count">// 返回按钮<view class="mp-mini-btn-color mp-box-count" hover-class="mp-mini-btn-hover" @click="clickLeft"><uni-icons type="left" size="18" color="#ffffff"></uni-icons></view>// 视频 最主要是 style 样式<iframe class="mp-iframe" :src="ptzUrl" frameborder="0" :style="`width: ${dataInfos.windowHeight}px;height: ${dataInfos.windowWidth}px;position: absolute;top: -4px;left: 0;transform: rotate(90deg);transform-origin: 175px 50%;position: absolute;left: 0px;right:0;`"></iframe></view></view>
</template>export default {data() {return {dataInfos: {}, // 获取设备信息}},props: {// 视频流ptzUrl: {type: String,default: () => '',},},mounted() {let that = this// 获取设备的所有参数// 这里主要获取屏幕的宽高uni.getSystemInfo({success: function(e) {console.log(e, '传参设备')that.dataInfos = e},})},methods: {// 返回上一页clickLeft() {this.$emit('callbackFun')},},}
</script>
<style scoped lang="scss">.mp-large-screen-box {width: 100%;height: 100%;.uni-navbar__content {border-bottom: 0;}}.mp-large-screen-count {width: 100%;height: 100%;}.mp-iframme {width: 100%;height: 100%;}.mp-mini-btn-color {margin-top: 14px;position: fixed;display: block;padding-left: 14px;padding-right: 14px;box-sizing: border-box;font-size: 18px;text-align: center;text-decoration: none;border-radius: 5px;overflow: hidden;cursor: pointer;line-height: 36px;font-size: 14px;background-color: var(--mp-primary);border-color: var(--mp-primary);color: #fff;bottom: 30px;width: 36px;height: 36px;right: 20px;display: flex;justify-content: center;align-items: center;}.mp-mini-btn-hover {animation: var(--mp-primary-light-10);}.mp-box-count {transform: rotate(90deg);position: absolute;right: 40px;z-index: 10;top: 10px}
</style>