quasar/src/components/video/QVideo.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import { h, computed } from 'vue'

import useRatio, { useRatioProps } from '../../composables/private.use-ratio/use-ratio.js'

import { createComponent } from '../../utils/private.create/create.js'

export default createComponent({
  name: 'QVideo',

  props: {
    ...useRatioProps,

    src: {
      type: String,
      required: true
    },

    title: String,

    fetchpriority: {
      type: String,
      default: 'auto'
    },
    loading: {
      type: String,
      default: 'eager'
    },
    referrerpolicy: {
      type: String,
      default: 'strict-origin-when-cross-origin'
    }
  },

  setup (props) {
    const ratioStyle = useRatio(props)

    const classes = computed(() =>
      'q-video'
      + (props.ratio !== void 0 ? ' q-video--responsive' : '')
    )

    return () => h('div', {
      class: classes.value,
      style: ratioStyle.value
    }, [
      h('iframe', {
        src: props.src,
        title: props.title,
        fetchpriority: props.fetchpriority,
        loading: props.loading,
        referrerpolicy: props.referrerpolicy,
        frameborder: '0',
        allowfullscreen: true
      })
    ])
  }
})