title: Displaying video in Nuxt carousel component
body: <p><a href="https://i.stack.imgur.com/nvEZG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nvEZG.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <pre><code>&lt;template&gt;
  &lt;section&gt;
  &lt;v-card
      class="mx-auto"
      color="#26c6da"
      dark
      max-width="1200"
  &gt;
  
  &lt;v-carousel&gt;
      &lt;v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"&gt;&lt;/v-carousel-item&gt;
  &lt;/v-carousel&gt;
  
  &lt;/v-card&gt;
  
  &lt;/section&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  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 =&gt; {
      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
      };
      }
  }
  </code></pre>
  
  <p>This works fine for the jpg images but I see a blank screen for the video file. What Am I doing wrong here. </p>
  
  <p>EDIT:</p>
  
  <p>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?</p>
  
  <pre><code>export default {
    data() {
      return {
        items: [  {
  id: '1',
  content: '&lt;iframe width="560" height="315" ' +
    'src="https://www.youtube.com/embed/zjcVPZCG4sM" ' +
    'frameborder="0" allow="autoplay; encrypted-media" ' +
    'allowfullscreen&gt;&lt;/iframe&gt;'
   },
          {
            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"
          }
        ]
      };
    }
  </code></pre>
  
  <p>};</p>