1

I'm finding it difficult to load a YouTube video using magnificpopup.

I could not find any solution on the following reference: how to load magnific popup on page load.

Here's the code:

$(document).ready(function(){
    $.magnificPopup.open({
    disableOn: 700,
    type: 'iframe',
    removalDelay: 160,
    preloader: true,
    fixedContentPos: false,
     iframe: {
        patterns: {
            youtube: {
                index: 'https://youtube.com/', 
                id: 'v=somevideo', 
                src: 'http://www.youtube.com/embed/%id%?autoplay=1' 
            }
        }
    }
});
});

I need the video to load on page load. It throws an error stating:

Uncaught TypeError: Cannot read property 'parsed' of undefined
Community
  • 1
  • 1
coloraddict
  • 113
  • 1
  • 12
  • 2
    Whenever you get an error like this, use a debugger (such as Firebug or Chrome's Developer Tools) to step through the program execution. At some point, you're passing in `undefined` to a method that expects a real value - which is what the error says. In fact, the Javascript console probably tells you where this happens without you even needing to fire up the debugger. – Andrzej Doyle Nov 12 '14 at 11:03
  • Thanks! Andrzej - i already looked in the chrome console, which throws this error - Uncaught TypeError: Cannot read property 'parsed' of undefined – coloraddict Nov 12 '14 at 11:10

1 Answers1

1

Why do you expect the code in your question to work? As in, what makes you think that those are a good set of properties to pass to the magnificPopup.open function?

I've had a look at the documentation/examples from http://dimsemenov.com/plugins/magnific-popup/, and I couldn't see an example that involved passing an iframe property.

The example given for a YouTube video attaches handlers to href elements:

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

        fixedContentPos: false
    });
});

(along with some styling options to specify what the mfp-fade class should look like). So from what I can see, you're just calling the method incorrectly.

Andrzej Doyle
  • 102,507
  • 33
  • 189
  • 228
  • Thanks! Andrzej i added one src attribute in what you had posted above...now its not throwing any error in the console but also not loading the video...well i think i will go through the documentation once more – coloraddict Nov 12 '14 at 14:09