Magnific popup youtube video doesn't load

Question

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.com/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.com/watch?v=qdMexQCi5-Q and http://www.youtube.com/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.

Answer 1

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

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

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

Answer 2

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.

Answer 3

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

Answer 4

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.com/', 

            id: 'v=',

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


        },

        srcAction: 'iframe_src', 
      }
  });

});