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

【问题标题】：stretch embedded vimeo in vue.js fails在 vue.js 中拉伸嵌入式 vimeo 失败
【发布时间】：2019-03-05 15:57:10
【问题描述】：

我在 vue.js 中使用 vue-vimeo-player 来嵌入 vimeo 视频。我想将视频拉伸到整个屏幕宽度并使其具有响应性，但我无法拉伸。

这里有一个简单的 vue 组件来说明问题。我当然可以改变 player-height 和 player-width 道具来改变大小，但我不能让它 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>

【问题讨论】：

标签： vue.js vimeo

【解决方案1】：

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

经过进一步调查，
vue-vimeo-player 需要 vimeo 播放器 npm 包。
vue-vimeo-player

@Vimeo/player 有一个 responsive 选项，默认设置为 false。
github/vimeo/player

你可以通过 vue-vimeo-player 通过 options 属性传递

这样

<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>

注意：

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

【讨论】：

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

【解决方案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

【讨论】：