Vuetify: maximize video size in Carousel Slide

0
votes

I'm working with Vuejs and Nuxt and would like to display a video in a vuetify carousel component :

This can be seen here:

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

This is working size but I want ro resize the video to fill the carousel slide. I've tried:

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

and

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

But there is no change. How can I maximize the video size?

1
vue.jsvuetify.js

1 Answers

1
votes

There is no such thing as max value for width or height attributes: the closest thing is using 100%. However, using height: 100% will not work: the reason is because it has to be relative to a certain value.

Vuetify's carousel has a default height of 500px, so if you set your <iframe> element to have a width of 100% and a height of 500px, that should fix the issue, e.g.:

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

See updated Codepen: https://codepen.io/anon/pen/VOegwN

If you want to future-proof your setup (i.e. to protect yourself against future changes in the default carousel height), you should then set the height explicitly:

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