растянуть встроенный vimeo в vue.js не удается - PullRequest
Новая
       13

растянуть встроенный vimeo в vue.js не удается

2 голосов
/ 05 марта 2019

Я использую vue-vimeo-player в vue.js для встраивания видео vimeo.Я хочу растянуть видео по всей ширине экрана и сделать его отзывчивым, но не могу растянуть его.

Вот простой компонент, иллюстрирующий проблему.Я, конечно, могу изменить реквизиты высоты игрока и ширины игрока, чтобы изменить размер, но я не могу сделать его 100% и отзывчивым.Я думал, что класс Vimeo в моем CSS должен решить эту проблему, но не повезло.

Любая подсказка будет очень цениться! 

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

1 Ответ

1 голос
/ 05 марта 2019

Компонент vue - это просто оболочка для проигрывателя vimeo.

При дальнейшем расследовании
vue-vimeo-player требует пакета vimeo npm игрока.
вя-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 / стиль

...