Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

wilnet

Visualizar Youtube antes.

Por , em Javascript

Recommended Posts

wilnet    92

wilnet
Postado

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.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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>
.fleft { float: left; }
.fright { float: right; }
</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>
??

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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>
.fleft { float: left; }
.fright { float: right; }
</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>
note que agora estou usando o evento onkeyup, que vai ser "o momento em que o usuário levantar o dedo da tecla", no caso, quando ele acabar de "colar".

E ai, vc pode incrementar para mais eventos, e para evitar disparar a função em horas erradas.

 

Entendeu como funciona ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

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,

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

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.


Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito