javascript - Magnific popup youtube video doesn't load - Stack Overflow

admin管理员组

文章数量:1426300

I have seen the other posts about this matter, and the suggestions made did not resolve the problem. Some of the posts don't even have an answer. I posted this as an answer in one post, and it was deleted twice. I would appreciate it if the developper could help me out, as this is the place he has indicated to ask questions.

I have all the js files, and the image popups work just fine (indivudual and gallery). For the videop pop up I added this script to the page:

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

    fixedContentPos: false
});

});

And this code to the video link:

<a class="popup-youtube" href="">Video</a>

The popup opens but the video doesn't play. The youtube link is correct, as far as I know - I followed Dimitry's instructions for a clean link (e.g. and , neither works). The "jquery-1.2.6.min.js" file in my JS folder may be too old. Where can I find an updated version? Looked and can't find it. Totally self taught website builder here, please use simple language when explaining what the heck it is I'm doing wrong. Thank you in advance.

I have seen the other posts about this matter, and the suggestions made did not resolve the problem. Some of the posts don't even have an answer. I posted this as an answer in one post, and it was deleted twice. I would appreciate it if the developper could help me out, as this is the place he has indicated to ask questions.

I have all the js files, and the image popups work just fine (indivudual and gallery). For the videop pop up I added this script to the page:

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

    fixedContentPos: false
});

});

And this code to the video link:

<a class="popup-youtube" href="http://www.youtube./watch?v=qdMexQCi5-Q">Video</a>

The popup opens but the video doesn't play. The youtube link is correct, as far as I know - I followed Dimitry's instructions for a clean link (e.g. https://www.youtube./watch?v=qdMexQCi5-Q and http://www.youtube./watch?v=qdMexQCi5-Q, neither works). The "jquery-1.2.6.min.js" file in my JS folder may be too old. Where can I find an updated version? Looked and can't find it. Totally self taught website builder here, please use simple language when explaining what the heck it is I'm doing wrong. Thank you in advance.

• javascript
• jquery
• youtube
• magnific-popup

Share Improve this question Follow edited Nov 11, 2014 at 14:55 Paula Blank asked Nov 11, 2014 at 14:46 Paula BlankPaula Blank 111 silver badge22 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Did you read this, it talks about having your code running in a server environment or using https://? As you said you followed Dmitrys' tutorial; he is using what we called protocol-relative URL (URL starting with "//") in his code so if you are running your code locally (by just opening the .html files with your browser) this will not work. You should use the solution given by Chris So of explicitly forcing either http:// or https:// instead of // the protocol-relative URL.

Seems like a dependency of magnificPopup is having jQuery 1.7.2 or later. http://plugins.jquery./magnific-popup/

You can update to a newer version from the jQuery webiste http://jquery./download/ or referencing the file online

<script src="//ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script

Try this. I hope this will help.

$(document).ready(function() {

$('.free_video_popup').magnificPopup({
    type: 'iframe',
    // other options
    iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
                  '<div class="mfp-close"></div>'+
                  '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>', 

        patterns: {
          youtube: {
            index: 'youtube./', 

            id: 'v=',

            src: 'https://www.youtube./embed/%id%' 
          },


        },

        srcAction: 'iframe_src', 
      }
  });

});

You need to adjust your link from http://www.youtube./watch?v=qdMexQCi5-Q, to http://www.youtube./embed/qdMexQCi5-Q, change /watch?= to /embed/

本文标签： javascriptMagnific popup youtube video doesn39t loadStack Overflow