Question

我正在vue.js中使用vue-vimeo-player嵌入vimeo视频。我想在屏幕的整个宽度上拉伸视频并使其具有响应能力，但是我无法使其拉伸。

在这里是说明问题的简单组件。我当然可以更改播放器高度和播放器宽度道具以更改大小，但我不能使其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>

Answer 1

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

进一步调查后，
vue-vimeo-player需要vimeo播放器npm软件包。
vue-vimeo-player

@Vimeo/player的{{1}}选项默认设置为false。
github/vimeo/player

您可以通过responsive道具通过vue-vimeo-player

这样

options

注意：

您可能仍需要处理CSS宽度/样式

Answer 2

你可以这样做，

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

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

参考：https://github.com/dobromir-hristov/vue-vimeo-player/issues/15

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

2 个答案:

注意：