Я пытаюсь выполнить рендеринг YouTube Iframe из файла JSON и компонента «Рендеринг в дочерний».У меня есть родительский компонент, который загружает данные карты из этого файла JSON. По щелчку этого файла карты я отображаю значение JSON данных карты, которое также имеет URL-адрес видео. Когда я нажимаю на карту, я открываю данные карты в новой вкладке иполучает только окно Iframe, а не видео-превью, как на обычном YouTube.Что сделать, чтобы это исправить?
PS Мой проект - React .Net Core.
CardData.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;
ProjectDetailPage.tsx
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>
);
}