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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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>