时间戳

首页 > 解决方案 > stretch embedded vimeo in vue.js fails

vue.js - stretch embedded vimeo in vue.js fails

问题描述

Im using the vue-vimeo-player in vue.js for embedding vimeo video. I want to stretch the video over the full width of the screen and make it responsive but I cannot make it to stretch.

Here is a simple component in vue illustrating the problem. I can of course change the player-height and player-width props to change the size but I cannot make it 100% and responsive. I thought the vimeo class in my css should solve this but no luck.

Any hint would be very much apreciated!

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

解决方案

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

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

@Vimeo/player有一个responsive默认设置为 false 的选项。
github/vimeo/播放器

您可以通过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 宽度/样式

推荐阅读