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

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

Источник

4 ответа

Решение

Функция или плагин, который вы используете для отображения всплывающего окна, вероятно, будет отличаться от того, который вы используете для отображения видео. В этом примере я использовал плагин Overlay из 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>
Источник

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.

Источник

Посмотрите демоверсии для FancyBox и ColorBox

Источник

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

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

Источник
Другие вопросы по тегам