Vuetify：在轮播幻灯片中最大化视频大小

【问题标题】：Vuetify: maximize video size in Carousel SlideVuetify：在轮播幻灯片中最大化视频大小
【发布时间】：2019-09-27 17:01:41
【问题描述】：

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

可以在这里看到：

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

这是工作大小，但我想调整视频大小以填充轮播幻灯片。我试过了：

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

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

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

没有像max这样的宽度或高度属性值：最接近的是使用100%。但是，使用height: 100% 将不起作用：原因是它必须相对于某个值。

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

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

查看更新的 Codepen：https://codepen.io/anon/pen/VOegwN

如果您想对您的设置进行未来验证（即保护自己免受未来默认轮播高度的更改），则应明确设置高度：

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

【讨论】：

如果在 500 px 的高度上硬编码，响应式显示会不会有问题？
@user61629 是和否。是的，如果您忘记更新两个地方的高度。不记得的话：）