Estou adicionando o video e está indo certinho, porém o video não aparece na pagina, só funciona me redirecionando para o ytb
Estou adicionando o video e está indo certinho, porém o video não aparece na pagina, só funciona me redirecionando para o ytb
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:
Em caso de mais dúvidas, me coloco à disposição.
Grande abraço e 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();