YouTubeEmbed

Demos

Default

Fullscreen
import { YouTubeEmbed } from 'marketing-ui'

function Demo() {
  return (
    <YouTubeEmbed>
      <iframe
        title='SONAX'
        style={{ aspectRatio: '16/9', width: '100%' }}
        src='https://www.youtube.com/embed/aqz-KE-bpKQ'
        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
        referrerPolicy='strict-origin-when-cross-origin'
        allowFullScreen
      />
    </YouTubeEmbed>
  )
}

export default Demo

With placeholder

Fullscreen
import { Image, YouTubeEmbed } from 'marketing-ui'

function Demo() {
  return (
    <YouTubeEmbed
      placeholder={
        <Image src='https://img.youtube.com/vi/aqz-KE-bpKQ/maxresdefault.jpg' />
      }
    >
      <iframe
        title='SONAX'
        style={{ aspectRatio: '16/9', width: '100%' }}
        data-src='https://www.youtube.com/embed/aqz-KE-bpKQ'
        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
        referrerPolicy='strict-origin-when-cross-origin'
        allowFullScreen
      />
    </YouTubeEmbed>
  )
}

export default Demo

Props