Skip to content Skip to sidebar Skip to footer

Add Video Url, With Live Preview Option

I am creating a form which allows people to enter a video url. Standard input form, to accept a URL like: http://video.google.com/videoplay?docid=1299927595688205543 I would like

Solution 1:

<formid="video_upload_form"action=""><labelfor="video_input_box">Video URL</label><inputtype="text"id="video_input_box"value="" /><inputtype="submit"value="Add Video" /></form><p><ahref="#"id="video_preview"class="lightbox">Preview Video</a></p><scripttype="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);
        returnfalse;
    });
});
</script>

Also here it is as a JSFiddle: http://jsfiddle.net/Treffynnon/CEMpT/

You will need to do some validation on the URL supplied by the user before putting it into the preview link, but I will leave that part up to you as you have not asked for help with it in your question.

Post a Comment for "Add Video Url, With Live Preview Option"