Magnific Popup - Error when opening a you tube video

Can not get a video to play in the magnific pop up window. When I use class=iframe, the page will redirect to youtube and play the video. But when I use class=popup-youtube, the popup will display, but I receive the following error message:

This webpage is not found

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.

Here is the HTML code:

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

Here is the JS:

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

            fixedContentPos: false
        });
    });

I am running this locally on my PC through IIS for testing. My other links that I set up for single images, gallery images and a google map work fine with magnific pop up. The video is the only one not working.

Make sure that you're running this code in server environment, or add https: to youtube src option http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type

Add the code inside the extend function for every popup like this:

$.extend(true, $.magnificPopup.defaults, {  
    iframe: {
        patterns: {
           youtube: {
              index: 'youtube.com/', 
              id: 'v=', 
              src: 'http://www.youtube.com/embed/%id%?autoplay=1' 
          }
        }
    }
});

Something I found with "v" argument, I see patterns in core file "jquery.magnific-popup.js"

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

Frontend link:

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

I gave link to A tag "https" url but not work.

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

I see valid url "v" argument with video code "YQHsXMglC9A" and it's works :)
so we just need to change "v" argument value.

Arrg! This took me a while to figure out. The class "popup-YouTube" should be all lowercase.

Instead of

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

Note the capital letters in YouTube

It should be

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

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

remove "HTTP:" OR "HTTPS:". the issue is with if your site is opening with HTTP and your popup video URL is starting with HTTPS then it will redirect you to the page.

来源：https://stackoverflow.com/questions/16917624/magnific-popup-error-when-opening-a-you-tube-video

标签

magnific-popup