Question

我该如何绑定到通过YouTube数据API接收到的内容的iframe src？

我可以在：src内设置一个字符串并连接到它的末尾吗？

/embed/'this.param.videoId'

响应返回一个ID {{video.snippet.resourceId.videoId}}，但该网址包含其他部分src =“ https://www.youtube.com/embed/xxx”

任何帮助都将不胜感激！

谢谢

Answer 1

仅在有videoId时解析iframe：

<iframe v-if="videoId" :src="mySrc"></iframe>

计算属性：

computed: {
  mySrc: {
    get: function() {
      //concat using template literal
      return `https://www.youtube.com/embed/${this.videoId}`
    }
  }
}

数据属性：

{
  videoId: false
}

您要为其分配的方法：

methods: {
  getMyVideo() {
    video = // get my video code
    this.videoId = video.snippet.resourceId.videoId
  }
}

或者，如果您超级懒，只需内联它：

<iframe src="`https://www.youtube.com/embed/${videoId}`"></iframe>

Answer 2

这有效：

 :src="ytEmbedUrl + video.snippet.resourceId.videoId"

Answer 3

这是对我有用的 Bootstrap V5 css

<template>
  <section class="video-player-container">
    <div class="video-player-row">
      <div
        class="video-player ratio"
        :class="`ratio-${group.videoAspectRatio}`"
      >
        <iframe
          loading="lazy"
          :src="`https://www.youtube.com/embed/${getIdFromURL(group.videoEmbedLink)}?rel=0`"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        />
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    group: {
      type: Object,
      required: true
    }
  },
  methods: {
    getIdFromURL (url) {
      const youtubeRegexp = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig
      let id = url.replace(youtubeRegexp, '$1')

      if (id.includes(';')) {
        const pieces = id.split(';')

        if (pieces[1].includes('%')) {
          const uriComponent = decodeURIComponent(pieces[1])
          id = `http://youtube.com${uriComponent}`.replace(youtubeRegexp, '$1')
        } else {
          id = pieces[0]
        }
      } else if (id.includes('#')) {
        id = id.split('#')[0]
      }

      return id
    }
  }
}
</script>

<style scoped lang="scss">
  .video-player {
    &-container {
      @include make-container();
      @include default-max-widths();
    }

    &-row {
      @include make-row();
    }
  }
</style>

如何将此src绑定到vue js中的iFrame？

3 个答案: