iFrame responsive positioning

index.vue

<template>
 <div class="aspect-ratio">
        <iframe
          class="video"
          :src="'https://www.youtube-nocookie.com/embed/' + data.videoUrl "
          frameborder="0"
          allow="autoplay; encrypted-media"
          allowfullscreen
        ></iframe>
      </div>
</template>

<style scoped>
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
</style>