我正在使用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>'
但是没有变化。如何最大化视频大小?
答案 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">