<template>
  <div style="display: flex; flex-direction: column; align-items: center">
    <div style="margin: 1.5em auto; display: inline-block">
      <!-- NOTE:
        add ?autoplay=1 to the src query string
        add enablejsapi=1 to query to allow video play tracking in the page's Google Analytics
      -->
      <iframe style="display: inline-block" width="560" height="315" :src="`https://www.youtube.com/embed/${idAndSi}&enablejsapi=1&autoplay=${autoplay?'1':'0'}`" title="Dexorder on YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
  </div>
</template>

<script setup>
const idAndSi = '_sqzehuqWXw?si=SY04mCk9MhiBPFLP'
const props = defineProps({autoplay: {type: Boolean, default: false}})
</script>
