React YouTube Embed Component (iframe)

YouTubeEmbed.jsx

import React from 'react'

export default function YouTubeEmbed({ videoId, ...props }) {
  return (
    <iframe
      width="560"
      height="315"
      src={idToEmbedURL({ id: videoId })}
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen="true"
      {...props}
    />
  )
}

const bool2num = bool => (bool ? 1 : 0)

// via https://developers.google.com/youtube/player_parameters
function idToEmbedURL({
  id,
  rel = false,
  autoplay = false,
  modest = true,
  base = 'https://www.youtube.com/embed',
}) {
  const params = {
    autoplay: `autoplay=${bool2num(autoplay)}`,
    branding: `modestbranding=${bool2num(modest)}`,
    rel: `rel=${bool2num(rel)}`,
  }
  const opts = Object.values(params)
    .map(v => v)
    .join('&')
  return `${base}/${id}?${opts}`
}

Example

const url2id = url => (rgx => rgx ? rgx[1] : '')(url.match(/v=(\w+)/))

function Video({ src = "https://www.youtube.com/watch?v=DXwTF_yoOrg" }){
    return <div className="..."><YouTubeEmbed videoId={url2id(src)} /></div>
}