Добавить видео URL, с возможностью предварительного просмотра в реальном времени

Question

Я создаю форму, которая позволяет людям вводить URL-адрес видео. Стандартная форма ввода, чтобы принять URL-адрес, как:

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

Я хотел бы добавить кнопку (в форме, которая говорит что-то вроде [превью-видео]). По сути, эта кнопка / ссылка добавляет ссылку, введенную в поле ввода, к этому коду:

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

Это должно быть доступно до отправки формы.

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>

Также здесь это как JSFiddle: http://jsfiddle.net/Treffynnon/CEMpT/

Вам потребуется выполнить некоторую проверку URL-адреса, предоставленного пользователем, прежде чем поместить его в ссылку для предварительного просмотра, но я оставлю эту часть на ваше усмотрение, поскольку вы не обращались за помощью в этом вопросе.