VUE 3 - iframe 视频

Question

从 axios 我得到 iframe 视频 link:

<iframe src="https..." width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Tr&amp;eacute;ning TEXT"></iframe>

...并且我需要在页面上显示这个iframe并播放视频（视频的自动启动不重要，点击后才需要按钮）

感谢您的帮助。

Answer 1

如果我理解正确的话，请尝试像下面的片段：

const app = Vue.createApp({
  data() {
    return {
      showFrame: false,
      video: '<iframe src="https://www.youtube.com/embed/qZXt1Aom3Cs" width="1920" height="1080" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Tr&amp;eacute;ning TEXT"></iframe>'
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="showFrame = true">Show</button>
  <div v-html="video" v-show="showFrame"></div>
</div>

VUE 3 - iframe 视频

VUE 3 - iframe video

video

iframe

vuejs3