Question

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

可以在这里看到

这是正常大小，但我想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>'

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

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

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

1 个答案: