在 vue.js 中拉伸嵌入的 vimeo 失败
stretch embedded vimeo in vue.js fails
我正在使用 vue.js 中的 vue-vimeo-player 来嵌入 vimeo 视频。我想在屏幕的整个宽度上拉伸视频并使其响应,但我无法拉伸。
这里有一个简单的 vue 组件来说明这个问题。我当然可以改变 player-height 和 player-width 道具来改变大小,但我不能让它 100% 和响应。我认为我的 css 中的 vimeo class 应该可以解决这个问题,但运气不好。
如有任何提示,我们将不胜感激!
<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 组件只是 vimeo 播放器的包装器。
经进一步调查,
vue-vimeo-player
需要 vimeo
播放器 npm 包。
vue-vimeo-player
@Vimeo/player
有一个 responsive
的选项,默认设置为 false。
github/vimeo/player
你可以通过 options
属性vue-vimeo-player
传递
这样
<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>
注:
You may still need to handle css widths/styling
你可以这样做,
<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 中的 vue-vimeo-player 来嵌入 vimeo 视频。我想在屏幕的整个宽度上拉伸视频并使其响应,但我无法拉伸。
这里有一个简单的 vue 组件来说明这个问题。我当然可以改变 player-height 和 player-width 道具来改变大小,但我不能让它 100% 和响应。我认为我的 css 中的 vimeo class 应该可以解决这个问题,但运气不好。
如有任何提示,我们将不胜感激!
<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 组件只是 vimeo 播放器的包装器。
经进一步调查,
vue-vimeo-player
需要 vimeo
播放器 npm 包。
vue-vimeo-player
@Vimeo/player
有一个 responsive
的选项,默认设置为 false。
github/vimeo/player
你可以通过 options
属性vue-vimeo-player
传递
这样
<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>
注:
You may still need to handle css widths/styling
你可以这样做,
<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