在vue.js中拉伸嵌入的vimeo失败

Im使用vue.js中的插件嵌入vimeo视频。我想在屏幕的整个宽度上拉伸视频并使其响应，但我无法使其拉伸

下面是vue中的一个简单组件，说明了这个问题。当然，我可以改变球员的身高和宽度道具来改变大小，但我不能让它100%响应。我认为css中的vimeo类应该解决这个问题，但运气不好

任何提示都将非常感谢

<template>
  <vimeo-player
    class="vimeo"
    ref="player"
    :video-id="videoID"
    @ready="onReady"
    :autoplay="true"
    :player-height="320"
    :player-width="640"
    loop="1"
  ></vimeo-player>
</template>

<script>
export default {
  data() {
    return {
      videoID: "224712377",
      options: {},
      playerReady: false
    };
  },
  methods: {
    onReady() {
      this.playerReady = true;
    },
    play() {
      this.$refs.player.play();
    },
    stop() {
      this.$refs.player.stop();
    }
  }
};
</script> 

<style lang="scss">
.vimeo {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // max-height: 200px;
  position: absolute;
}
</style> 

导出默认值{
数据（）{
返回{
videoID:“224712377”，
选项：{}，
playerReady:错
};
},
方法：{
onReady（）{
this.playerReady=true；
},
play（）{
此.$refs.player.play（）；
},
停止（）{
此.$refs.player.stop（）；
}
}
};
维梅奥先生{
左：0；
排名：0；
身高：100%；
宽度：100%；
//最大高度：200px；
位置：绝对位置；
}

vue组件只是vimeo播放器的包装

经进一步调查，

vue vimeo播放器

需要

vimeo

player npm软件包。

@Vimeo/player

有一个

responsive

选项，默认设置为false。

您可以通过

选项

道具通过

vue vimeo播放器

以致

<template>
    <vimeo-player
        class="vimeo"
        ref="player"
        :options="{ responsive: true }"
        :video-id="videoID"
        @ready="onReady"
        :autoplay="true"
        :player-height="320"
        :player-width="640"
        loop="1"
      ></vimeo-player>
</template>

<style lang="scss">
.vimeo {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // max-height: 200px;
  position: absolute;
}
</style> 

维梅奥先生{
左：0；
排名：0；
身高：100%；
宽度：100%；
//最大高度：200px；
位置：绝对位置；
}

注: 您可能仍然需要处理css宽度/样式

你可以这样做

<vimeo-player :video-id="video_id" class="embed-container" :options {'responsive':true}"></vimeo-player>

<style>
  .embed-container {
    width: 100% !important;
  }
</style>

---

谢谢！这就做到了：“：options=“{responsive:true}”“（并且安装了npm包：））如果您对答案满意，也可以随意投票-感谢您的接受！