Vuetify:在“轮播幻灯片”中最大化视频尺寸

时间:2019-05-09 19:43:01

标签: vue.js vuetify.js

我正在使用Vuejs和Nuxt,并希望在vuetify轮播组件中显示视频:

可以在这里看到

https://codepen.io/anon/pen/MqBEqb

这是正常大小,但我想ro调整视频大小以填满轮播幻灯片。我尝试过:

<iframe width="auto" height="auto" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'

<iframe width="max" height="max" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'

但是没有变化。如何最大化视频大小?

1 个答案:

答案 0 :(得分:1)

没有宽度或高度属性的max值:最接近的是使用100%。但是,使用height: 100%无效:原因是因为它必须相对于某个值。

Vuetify的轮播has a default height of 500px,因此,如果您将<iframe>元素设置为100%的宽度和500px的高度,则应该可以解决此问题,例如:

#app iframe {
  width: 100%;
  height: 500px;
}

请参阅更新的Codepen:https://codepen.io/anon/pen/VOegwN


如果您想对安装进行将来的验证(例如,防止将来更改默认轮播高度),则应明确设置高度:

<v-carousel v-bind:height="500">