如何从json url向react组件呈现iframe

我正在尝试将youtube iframe从json文件呈现到子组件中。我有一个父组件,它正在从这个json文件加载卡数据。点击这个卡文件,我正在呈现卡数据json值,它也有视频url。当我点击卡,我打开卡数据到新的选项卡,我只得到iframe框而不是像普通youtube那样的视频预览。怎么解决?

我的项目是react.net核心。

卡片数据.tsx

const CardData = {
  "cards": [
    {
      "projectID": "00001",
      "projectName": "One tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
      "projectLocation": " New York, NY",
          "videoUrl": "https://www.youtube.com/embed/hHMqkmIvOFw"

    },
    {
      "projectID": "00002",
      "projectName": "Two tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
        "projectLocation": " New York, NY",
        "videoUrl": "hiii"
    },
    {
      "projectID": "00003",
      "projectName": "Three tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
        "projectLocation": " New York, NY",
        "videoUrl": "hiii"
    }
  ]
}
export default CardData;

import * as React from 'react';
import App from '../HomePopularCards/ProjectCardContainer';
import CardData from '../HomePopularCards/CardData';
export default function ProjectDetailPage(props) {
    const projectID = props.match.params.projectID;
    const project = CardData.cards.find(card => card.projectID === projectID);

    return (
        <div>
        <div className="container-fluid">
            <div className="row">
                <div className="col-md-12">
                    <h2 className="text-center">{project.projectName}</h2>
                </div>
            </div>  
        </div>      

        <div className="container-fluid">
            <div className="row">
                   <div className="col-md-6">
                        <iframe width="560" height="315" src={project.videoUrl} ></iframe>
                    </div>
                    <div className="col-md-6">
                        {project.projectBy}
                        {project.projectDescrition}
                        {project.projectLocation}

                </div> 
            </div>
        </div>   
            </div>

    );
}