Magnific Popup - Ошибка при открытии видео на YouTube

Не удается воспроизвести видео в большом всплывающем окне. Когда я использую class=iframe, страница будет перенаправляться на YouTube и воспроизводить видео. Но когда я использую class=popup-youtube, всплывающее окно будет отображаться, но я получаю следующее сообщение об ошибке:

Эта веб-страница не найдена

No webpage was found for the web address: file://www.youtube.com/embed/AcnImfXjBHo?autoplay=1
Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.

Вот HTML-код:

<a class="popup-YouTube" href="HTTP://www.youtube.com/watch?v=AcnImfXjBHo">
                                Trial Master File Video</a>

Вот JS:

$(document).ready(function() {
        $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
            disableOn: 700,
            type: 'iframe',
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,

            fixedContentPos: false
        });
    });

Я запускаю это локально на своем ПК через IIS для тестирования. Другие мои ссылки, которые я установил для отдельных изображений, изображений галереи и карты Google, отлично работают с всплывающим окном Magnific. Видео единственное не работает.


magnific-popup
person Phil    schedule 04.06.2013    source источник

Ответы (5)


arrow_upward
10
arrow_downward

Убедитесь, что вы запускаете этот код в серверной среде, или добавьте https: в параметр src youtube http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type

person Dmitry Semenov    schedule 04.06.2013
comment
Дмитрий - Спасибо!. В этом была проблема. Теперь он работает как чемпион. Возможно, вам следует добавить это в документацию для таких людей, как я, которые тестируют на локальной машине перед развертыванием. - person Phil; 04.06.2013
comment
У меня была такая же проблема, но теперь работает отлично. Я также думаю, что было бы здорово, если бы в документации была эта деталь. - person swayziak; 17.06.2013
comment
Спасибо. Это сработало, когда я запустил его в серверной среде. - person Sanjay Kumar; 30.07.2015
comment
@Dmitry Semenov Я столкнулся с той же проблемой, изображения работают нормально, но видео не загружаются. Я не работаю на сервере, это локально, и я включаю видео src с https:// - никакого результата. Вот что у меня есть ‹a href=youtube.com/watch?v=nw1ORBXpA_c class=popup-youtube›Видео YouTube ‹/a› - person Durdona A.; 02.08.2015

arrow_upward
4
arrow_downward

Добавьте код внутри функции extend для каждого всплывающего окна следующим образом:

$.extend(true, $.magnificPopup.defaults, {  
    iframe: {
        patterns: {
           youtube: {
              index: 'youtube.com/', 
              id: 'v=', 
              src: 'http://www.youtube.com/embed/%id%?autoplay=1' 
          }
        }
    }
});
person Chris So    schedule 26.06.2013
comment
Предупреждение: явная установка протокола http: предотвратит первоначальное намерение автоматически использовать текущий протокол. Но поскольку это ссылка на внешний сайт, это не проблема. - person David Cook; 22.01.2014

arrow_upward
2
arrow_downward

Что-то, что я нашел с аргументом «v», я вижу шаблоны в основном файле «jquery.magnific-popup.js»

patterns: {
    youtube: {
        index: 'youtube.com',
            id: 'v=',
            src: '//www.youtube.com/embed/%id%?autoplay=1'
        }
}

Ссылка на внешний интерфейс:

<a href="https://www.youtube.com/embed/YQHsXMglC9A" class="popup-youtube">youtube link</a>

Я дал ссылку на URL-адрес тега «https», но не работает. 

<a href="http://www.youtube.com/watch?v=YQHsXMglC9A" class="popup-youtube">youtube link</a>

Я вижу действительный аргумент URL "v" с кодом видео "YQHsXMglC9A", и он работает :)
поэтому нам просто нужно изменить значение аргумента "v".

person Ghanshyam Gohel    schedule 08.04.2016

arrow_upward
0
arrow_downward

Аррг! Это заняло у меня некоторое время, чтобы понять. Класс popup-YouTube должен быть написан строчными буквами.

Вместо

<a class="popup-YouTube" href="https://www.youtube.com/watch?v=AcnImfXjBHo">
                                Trial Master File Video</a>

Обратите внимание на заглавные буквы в YouTube

Должен быть

<a class="popup-youtube" href="https://www.youtube.com/watch?v=AcnImfXjBHo">
                                Trial Master File Video</a>
person John S    schedule 18.02.2015
comment
Чувствительность к регистру вашего класса не имеет значения, если вы используете идентичный регистр в своем javascript. - person user1380540; 15.04.2015

arrow_upward
0
arrow_downward

<a class="popup-YouTube" href="//www.youtube.com/watch?v=AcnImfXjBHo"> Trial Master File Video</a>

удалите «HTTP:» ИЛИ «HTTPS:». проблема в том, что если ваш сайт открывается с помощью HTTP, а URL-адрес вашего всплывающего видео начинается с HTTPS, тогда он перенаправит вас на страницу.

person Chaitanya Chauhan    schedule 27.06.2016