Magnific Popup - Error when opening a you tube video

Question

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.

Dmitry Semenov · Answer 1 · 2015-05-29T09:35:08.387

10

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

edited May 29 '15 at 09:35

answered Jun 04 '13 at 14:36

Dmitry Semenov

4,566
2
36
39

1

Dmtiry - Thank you!. That was the problem. It now works like a champ. Perhaps you should add that to the documentation, for people like myself who are testing on a local machine before deploying. – Phil Jun 04 '13 at 14:58
I was having the same problem, but now works perfectly. I also think that it would be great if the documentation have this detail. – swayziak Jun 17 '13 at 17:45
Thanks. It worked when I ran it in server environment. – Sanjay Kumar Jul 30 '15 at 04:46
@Dmitry Semenov I am facing with the same problem images works fine but videos don't get loaded. I am not running on the server it is locally and I include video src with https:// - no result at all. Here is what I have Video YouTube – Durdona A. Aug 02 '15 at 20:51

score 4 · Answer 2 · answered Jun 26 '13 at 12:03

4

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' 
          }
        }
    }
});

answered Jun 26 '13 at 12:03

Chris So

711
1
11
23

Warning: explicitly setting http: protocol will prevent the original intention of automatically the current protocol. But because it's linking to an external site then it's not really an issue. – David Cook Jan 22 '14 at 00:23

score 2 · Answer 3 · answered Apr 08 '16 at 17:08

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.

score 0 · Answer 4 · answered Feb 18 '15 at 04:39

0

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>

answered Feb 18 '15 at 04:39

John S

386
1
3
17

The case sensitivity of your class doesn't matter as long as you're using the identical case in your javascript. – user1380540 Apr 15 '15 at 18:53

score 0 · Answer 5 · answered Jun 27 '16 at 13:59

<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.

Magnific Popup - Error when opening a you tube video

5 Answers5

Linked