使用 Gatsby 嵌入视频 <iframe>

Question

我已经阅读了相关文档，但我的尝试被证明是错误的。我正在尝试根据正在查看的艺术家页面显示嵌入式视频。在我的 Json 文件中，我有一个 featuredVideo 键，其中包含嵌入的视频 url。但是当我在我的艺术家组件中使用 featuredVideo 时，屏幕上没有显示任何内容。任何帮助将不胜感激！这是我的视频组件：

import React from 'react'
const Video = ({ featuredVideo, videoTitle, ...props }) => (
  <div className='video'>
    <iframe
      src={featuredVideo}
      title={videoTitle}
      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      frameBorder='0'
      webkitallowfullscreen='true'
      mozallowfullscreen='true'
      allowFullScreen
    />
  </div>
)
export default Video

这是我的艺术家组件：

import Video from './components/video'
const ArtistContainer = ({ data }) => {
  const classes = useStyles()
  const {
    firstName,
    lastName,
    city,
    currentTeam,
    bio,
    twitter,
    instagram,
    email,
    whatWeLove,
    featuredVideo,
    recentPerformance,
  } = data.artistsJson

  return (
...
 <Video src={`https://www.youtube.com/embed/${featuredVideo}`} />

这是 Json 文件的一部分：

    "artistId": 59,
    "firstName": ["FirstName"],
    "lastName": ["LastName"],
    "bio": "This is a tester statement for dev purposes. -- blah blah blah blah blah blah blah -- blah blah blah blah blah blah blah",
    "highlight": "",
    "events": ["Winter 2020"],
    "featuredVideo": "C0eBTtXYTp0",
    "currentTeam": "CurrentTeam",
    "instagram": "https://www.instagram.com/wolfofvillage/",
    "city": "City",
    "tiktok": "",
    "twitter": "https://www.twitter.com/test",
    "youtube": "",
    "email": "test@email.com",
    "address": "",
    "phoneNumber": "",
    "whatWeLove": "This is a tester statement for dev purposes -- blah blah blah blah blah blah blah.",
    "recentPerformance": "06/08/2020"
  }

Answer 1

您正在通过动态 URL 传递一个 src 道具：

 <Video src={`https://www.youtube.com/embed/${featuredVideo}`} />

但是您得到 featuredVideo、videoTitle 和 ...props（其余）在：

import React from 'react'
const Video = ({ featuredVideo, videoTitle, ...props }) => (
  <div className='video'>
    <iframe
      src={featuredVideo}
      title={videoTitle}
      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      frameBorder='0'
      webkitallowfullscreen='true'
      mozallowfullscreen='true'
      allowFullScreen
    />
  </div>
)
export default Video

我想你正在寻找：

import React from 'react'
const Video = ({ src , ...props }) => (
  <div className='video'>
    <iframe
      src={src}
      title={`Some title`}
      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      frameBorder='0'
      webkitallowfullscreen='true'
      mozallowfullscreen='true'
      allowFullScreen
    />
  </div>
)
export default Video

请记住，您不会进一步 props 到 ...props 中的 Video 组件，因此您需要使用类似的东西重构 ArtistContainer :

import Video from './components/video'
const ArtistContainer = ({ data }) => {
  const classes = useStyles()
  const {
    firstName,
    lastName,
    city,
    currentTeam,
    bio,
    twitter,
    instagram,
    email,
    whatWeLove,
    featuredVideo,
    recentPerformance,
  } = data.artistsJson

  return (
...
 <Video src={`https://www.youtube.com/embed/${featuredVideo}`} videoTitle= {videoTitle} />

为了得到子组件中的videoTitle。

使用 Gatsby 嵌入视频 <iframe>

Embedding a video with Gatsby <iframe>

javascript

embedded-video

reactjs

gatsby