2
respostas

embed não funciona

Estou adicionando o video e está indo certinho, porém o video não aparece na pagina, só funciona me redirecionando para o ytb

2 respostas

Olá Lucas, tudo bem?

Não é possível determinar a causa exata do problema sem ver o código que você está usando. No entanto, aqui estão algumas possíveis razões pelas quais um vídeo incorporado pode redirecionar você para o YouTube em vez de reproduzir no seu site:

  • O link do vídeo que você está incorporando pode estar incorreto (link de compartilhamento incorporável);
  • O código embed que você está usando pode estar incorreto (formatado);
  • Pode haver conflitos com outros scripts em sua página (interferência na reprodução do vídeo);
  • O YouTube pode estar bloqueando o acesso ao vídeo incorporado (incorporação não restrita e habilitada pelo proprietário do vídeo);

Em caso de mais dúvidas, me coloco à disposição.

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Obrigado! Ainda não consegui identificar o erro.. vou lhe enviar os códigos

criarVideo

import { conectaApi } from "./conectaApi.js";

const formulario = document.querySelector("[data-formulario]");

 async function criarVideo(evento) {
    evento.preventDefault();

    const imagem = document.querySelector("[data-imagem]").value;
    const url = document.querySelector("[data-url]").value;
    const titulo = document.querySelector("[data-titulo]").value;
    const descricao = Math.floor(Math.random() * 10).toString();

    try{

    await conectaApi.criaVideo(titulo, descricao, url, imagem);

    window.location.href = "../pages/envio-concluido.html";
}catch(e){
    alert(e)
}
}

formulario.addEventListener("submit", evento => criarVideo(evento));

conectaApi
//REQUISIÇÃO DO TIPO GET
async function listaVideos() {
    const conexao = await fetch("http://localhost:3000/videos");
    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}
//REQUISIÇÃO DO TIPO POST
async function criaVideo(titulo, descricao, url, imagem) {
    const conexao = await fetch("http://localhost:3000/videos", {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({
            titulo: titulo,
            descricao: `${descricao} mil visualizações`,
            url: url,
            imagem: imagem
        })
    });
    if(!conexao.ok){
        throw new Error("Não foi possivel carregar o video")
    }
    const conexaoConvertida = await conexao.json();
    return conexaoConvertida;
}

async function buscaVideo(termoDeBusca) {
    const conexao = await fetch(`http://localhost:3000/videos?q=${termoDeBusca}`)
    const conexaoConvertida = conexao.json();

    return conexaoConvertida;
}

export const conectaApi = {
    listaVideos,
    criaVideo,
    buscaVideo
}

buscaVideos

import { conectaApi } from "./conectaApi.js";
import constroiCard from "./mostrarVideos.js";

async function buscarVideo(evento) {
    evento.preventDefault();

    const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
    const busca = await conectaApi.buscaVideo(dadosDePesquisa);

    const lista = document.querySelector("[data-lista]");

    while(lista.firstChild) {
        lista.removeChild(lista.firstChild)
    }

    busca.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))

    if (busca.length == 0) {
        lista.innerHTML = `<h2 class= "mensagem__titulo">Nenhum video encontrado</h2>`
    }
}

const botaoDePesquisa = document.querySelector("[data-botao-pesquisa]");

botaoDePesquisa.addEventListener("click", evento => buscarVideo(evento));

mostrarVideo

import { conectaApi } from "./conectaApi.js";

const lista = document.querySelector("[data-lista]");

export default function constroiCard(titulo, descricao, url, imagem) {
    const video = document.createElement('li');
    video.className = "videos__item";
    video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
    title="${titulo}" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
<div class="descricao-video">
    <img src="${imagem}" alt="logo canal alura">
    <h3>${titulo}</h3>
    <p>${descricao}</p>
</div>
`
    return video;
}

async function listaVideos() {
    try {
    const listaApi = await conectaApi.listaVideos();
    listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))
} catch{
    lista.innerHTML = `<h2 class="mensagem__titulo">Não foi possivel carregar a lista de videos</h2>`
}
}

listaVideos();