Ajouter une URL vidéo, avec l'option de prévisualisation en direct

Question

Je crée un formulaire permettant aux utilisateurs de saisir une URL vidéo. sous forme d'entrée standard, d'accepter une URL comme:

http://video.google.com/videoplay?docid=1299927595688205543 

Je voudrais ajouter un bouton (dans la forme, qui dit quelque chose comme [vidéo preview]). Fondamentalement, ce bouton/lien le lien qu'ils ajoute entrés dans le champ de saisie, à ce code:

<a href="http://video.google.com/videoplay?docid=1299927595688205543&lightbox[width]=610&lightbox[height]=360" class="lightbox">google video</a > 

Ce doit être disponible avant formulaire de soumission.

Answer 1

<form id="video_upload_form" action=""> 
    <label for="video_input_box">Video URL</label> 
    <input type="text" id="video_input_box" value="" /> 

    <input type="submit" value="Add Video" /> 
</form> 

<p><a href="#" id="video_preview" class="lightbox">Preview Video</a></p> 

<script type="text/javascript"> 
$().ready(function(){ 
    $('#video_upload_form').submit(function(){ 
     var video_url_params = '&lightbox[width]=610&lightbox[height]=360'; 
     var video_url = $('#video_input_box').val() + video_url_params; 
     $('#video_preview').attr('href', video_url); 
     return false; 
    }); 
}); 
</script> 

Ici aussi, il est comme jsFiddle: http://jsfiddle.net/Treffynnon/CEMpT/

Vous aurez besoin de faire une validation sur l'URL fournie par l'utilisateur avant de le mettre dans le lien de prévisualisation, mais je vais laisser cette partie jusqu'à vous comme vous n'avez pas demandé de l'aide dans votre question.