Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá Galera, tudo bem?
Em um capo do tipo "textarea" eu uso para inserir os dados de INCORPORAR vídeo do YouTube. Até ai beleza.
Como ele usa o tamanho dentro do IFRAME o width e height , gostaria de poder Visualizar ele antes de mandar gravar a página.
É possível eu colocar um Campo de visualizar em tempo real, assim que eu inserir os dados incorporados do youtube dentro desse Textarea?
Agradeço galera.
Não sei se entendi bem... é isso abaixo que vc quer ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style></style>
</head>
<body>
<textarea name="" cols="30" rows="10" id="text" class="fleft">
<iframe width="200" height="160" src="//www.youtube.com/embed/gfgfg" frameborder="0" allowfullscreen></iframe>
</textarea>
<button id="btn-view">Visualizar</button>
<div id="view" class="fright"></div>
<script>
var $view = document.getElementById('view'),
$btn = document.getElementById('btn-view'),
$text = document.getElementById('text');
$btn.addEventListener('click', function(){
$view.innerHTML = $text.value;
});
</script>
</body>
</html>Olá wbruno, obrigado.
Então é quase isso, poxa ta bem perto...
É possível no lugar no Botão Visualizar, ter algum campo sei lá.... uma <DIV>Exibeir o vídeo</DIV>.
Pois assim que for inserido o código de incorporar do vídeo no textarea, automaticamente ele seria exibido nesse Novo campo ou Div... isso é possível?
Grato.
OBS: Estou tentando trabalhar com seu exemplo, mas ele Demora muito pra carregar , e não exibe o vídeo.
Como não trabalho com Jquery, fica complicado eu solucionar isso.
Grato
Sim, já tem "essa div". O ponto é "saber oque significa assim que for inserido".
Entendeu o ponto ? No Javascript precisamos avisar quando queremos disparar uma função.
Eu usei o "click", para avisar que eu queria.
Talvez vc possa tentar assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style></style>
</head>
<body>
<textarea name="" cols="30" rows="10" id="text" class="fleft">
<iframe width="200" height="160" src="//www.youtube.com/embed/gfgfg" frameborder="0" allowfullscreen></iframe>
</textarea>
<button id="btn-view">Visualizar</button>
<div id="view" class="fright"></div>
<script>
var $view = document.getElementById('view'),
$btn = document.getElementById('btn-view'),
$text = document.getElementById('text');
document.addEventListener('keyup', function(){
$view.innerHTML = $text.value;
});
</script>
</body>
</html>Entendeu como funciona ?
O William Bruno, ta ajudando muito, mesmo.
Exatamente isso, o "textarea" vem vazio na página de cadastro.
Então eu clico no Vídeo e pego o código de incorporar, e colo dentro do "textarea"... ai é que será exibido no Campo de Visualização.
Apenas para o usuário antes de submeter o cadastro com qualquer tamanho de vídeo, ele poderá ver antes e corrigir as medidas que será pré-estilicidada.
Grato,
1. Demora pq o youtube é lento
2. Aqui funcionou cara, não sei, precisa debugar e entender o que há
3. Aqui fiz no Firefox do MAC
William Bruno,
Por favor, me desculpe, tava testando LocalHost, rsrsrs.
Testei na internet e funcionou perfeito no Chrome, FireFox, Opera, IE, Safari.
Muiiiiiiiito obrigado por sua ajuda.
Vou fazer mais uns testes e volto.
************************************************************************************
William Bruno, ficou Perfeito.
Muito obrigado mesmo por sua atenção e ajuda.
Vai ser muito útil pra mim, obrigado.
Resolvido.
Será que é possível isso galera?
Estou tentando usar <div> mas sem resultado.
O que preciso é, assim que inserir o código de Incorporação do Vídeo no "textarea":
<iframe width="200" height="160" src="//www.youtube.com/embed/gfgfg" frameborder="0" allowfullscreen></iframe>
Ele em tempo Real, já exibi-se a visualização do Vídeo em algum campo que é isso que não sei fazer.
Grato