Entrar Ainda não tem acesso?
1
resposta

A conexão com www.youtube.com foi recusada.

Referente ao curso React: praticando React com Js, no capítulo Evoluindo as rotas e atividade Rota dinâmica

por Santiago Oliveira Cunha
| 68.5k xp | 29 posts
import Banner from 'componentes/Banner';
import styles from './Player.module.css';
import videos from '../../pages/Inicio/Json/db.json';
import Titulo from 'componentes/Titulo';
import { useParams } from 'react-router-dom';
import Rodape from 'componentes/rodape';

export default function Player(){

    const parametros = useParams();
    const video = videos.find((video) => {
        return video.id === Number(parametros.id);
    })

    return(
        <>
           <div className={styles.centro}>
                <h1>Player</h1>
            </div>
            <section className={styles.container}>
                <iframe className={styles.container_video} width="100%" 
                height="100%" 
                src={video.link} 
                title={video.titulo} 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                allowfullscreen></iframe>
            </section>
        </>
    )
}

Arquivo DB.JSON

[
    {
        "id": 1,
        "titulo": "Sombra",
        "capa": "./imagens/card1.png",
        "link": "https://youtu.be/Og5-Pm4HNlI"
    },
    {
        "id": 2,
        "titulo": "Reaper",
        "capa": "./imagens/card2.png",
        "link": "https://youtu.be/nFP65i141to"
    },
    {
        "id": 3,
        "titulo": "Junkrat",
        "capa": "./imagens/card3.png",
        "link": "https://youtu.be/DqhiLbRXGUQ"
    },
    {
        "id": 4,
        "titulo": "Winston",
        "capa": "./imagens/card4.png",
        "link": "https://youtu.be/pwFu8kEsUW4"
    }
]
1 resposta
por Renan Lima
| 3455.9k xp | 7303 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Santiago! Tudo bem?

Pelo que entendi, você está tentando incorporar vídeos do YouTube em seu aplicativo React, mas está recebendo uma mensagem de erro que diz "A conexão com www.youtube.com foi recusada". Isso pode ser causado por vários motivos, mas vamos tentar algumas soluções.

Primeiramente, verifique se a URL do vídeo que você está tentando incorporar está correta. No seu arquivo db.json, você tem URLs como "https://youtu.be/Og5-Pm4HNlI". No entanto, quando estamos incorporando vídeos do YouTube, precisamos usar um formato de URL diferente.

A URL correta para incorporar vídeos do YouTube deve ser algo como "https://www.youtube.com/embed/[video-id]". Portanto, no seu caso, a URL do primeiro vídeo seria "https://www.youtube.com/embed/Og5-Pm4HNlI". Você precisa fazer essa alteração para todos os links de vídeo no seu arquivo db.json.

Então, o seu arquivo db.json ficaria assim:

[
    {
        "id": 1,
        "titulo": "Sombra",
        "capa": "./imagens/card1.png",
        "link": "https://www.youtube.com/embed/Og5-Pm4HNlI"
    },
    {
        "id": 2,
        "titulo": "Reaper",
        "capa": "./imagens/card2.png",
        "link": "https://www.youtube.com/embed/nFP65i141to"
    },
    {
        "id": 3,
        "titulo": "Junkrat",
        "capa": "./imagens/card3.png",
        "link": "https://www.youtube.com/embed/DqhiLbRXGUQ"
    },
    {
        "id": 4,
        "titulo": "Winston",
        "capa": "./imagens/card4.png",
        "link": "https://www.youtube.com/embed/pwFu8kEsUW4"
    }
]

Espero que essa informação seja útil para você. Se você ainda estiver enfrentando problemas, por favor, me avise. Espero ter ajudado e bons estudos!