Как открыть окно jquery для воспроизведения видео на YouTube?

Question

Мне нужно, чтобы это видео воспроизводилось автоматически. Было бы хорошо, этот код может воспроизводить видео из других источников, таких как Yahoo и т. Д. Возможно ли использовать HTML5 вместо jquery?

Answer 1

Функция или плагин, который вы используете для отображения всплывающего окна, вероятно, будет отличаться от того, который вы используете для отображения видео. В этом примере я использовал Overlay Plugin из jQuery Tools , чтобы отобразить модал, затем использовал swfobject , чтобы отобразить YouTube Flash Player. В качестве альтернативы, вы можете использовать HTML5-проигрыватель видео с резервной версией Flash для отображения видео, но вам все равно понадобится его, чтобы сначала открыть модал.

<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 1</a>
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 2</a>

<div class="modal" id="video-modal">
    <div id="video-container" style="width: 425px; height: 344px;"></div>
</div>

<script language="javascript" type="text/javascript">

    $(function() {
        var videoModal = $('#video-modal').overlay({
            expose: {
                color: 'black',
                loadSpeed: 200,
                opacity: 0.85
            },
            closeOnClick: true,
            api: true
        });

        $('.video-link').click(function() {
            videoModal.load();

            var videoUrl = $(this).attr('href');
            var flashvars = {};
            var params = {
                allowFullScreen: "true",
                allowscriptaccess: "always"
            };
            var attributes = {};

            swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);

            return false;
        });
    });

</script>

Answer 2

SimpleModal - отличный плагин jQuery, так как он предлагает множество различных опций, один из которых отображает внешний контент:

// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:true
});

Билл Бекельман предлагает большое количество руководств по интеграции SimpleModal с Asp.Net в качестве настраиваемого диалогового окна подтверждения. Он демонстрирует, как создавать отличные функциональные возможности на стороне клиента, а также как отправлять сообщения обратно на сервер. это действительно помогло мне понять, как лучше всего интегрировать jQuery с ASP.Net.

Answer 3

Посмотрите демонстрации для FancyBox и ColorBox

Answer 4

PrettyPhoto - это библиотека JavaScript, которая отображает изображения и видео в лайтбоксе.

Для ваших целей вам нужно пометить ссылку YouTube специальным атрибутом "rel", видео откроется во всплывающем лайтбоксе.