Displaying video in Nuxt carousel component

Question

I'm working with Nuxt and would like to display a video in a carousel component along side jpeg and png images I have in the static folder . You can see the static folder contents in the screenshot. The carousel component:

<template>
<section>
<v-card
    class="mx-auto"
    color="#26c6da"
    dark
    max-width="1200"
>

<v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>

</v-card>

</section>
</template>


<script>
var cache = {};
// const images = require.context('../static/', false, /\.png$|\.jpg/);
const images = require.context('../static/', false, /\.png$|\.jpg|\.mp4/);
var imagesArray = Array.from(images.keys());
// const images = ["./52lv.PNG", "./Capture1.PNG", "./maps.PNG"]
console.log(images.keys());
var constructed = [];
function constructItems(fileNames, constructed) {
    fileNames.forEach(fileName => {
    constructed.push({
        'src': fileName.substr(1)
    })
    });
    return constructed;
}
console.log('items ');
console.log(imagesArray);
// At build-time cache will be populated with all required modules. 
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
    data: function() {
    return {
        items: res
    };
    }
}

This works fine for the jpg images but I see a blank screen for the video file. What Am I doing wrong here.

EDIT:

following the directions below, I've substituted in the following. Unfortunately the video will not play and I'm getting a blank slide. All the jpg images work though. What am I doing wrong?

export default {
  data() {
    return {
      items: [  {
id: '1',
content: '<iframe width="560" height="315" ' +
  'src="https://www.youtube.com/embed/zjcVPZCG4sM" ' +
  'frameborder="0" allow="autoplay; encrypted-media" ' +
  'allowfullscreen></iframe>'
 },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
        }
      ]
    };
  }

};

Answer 1

It looks like it might be a vuetify problem. The current solution seems to be to use iframes. Just change the src in the iframe and make the width and height auto. checkout the issue on github: https://github.com/vuetifyjs/vuetify/issues/5063.

codepen:

items: [{
  id: "1",
  content: '<iframe width="560" height="315" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'},
        { id: "2",
  content: '<iframe width="560" height="315" src="https://www.youtube.com/embed/zjcVPZCG4sM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'}
]

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