Magnific-popup: Youtube embed video link

Created on 2 Sep 2015 · 8Comments · Source: dimsemenov/Magnific-Popup

Hi.
I try insert embed YT video link like "http://www.youtube.com/embed/uz8NDWopZyU" with iframe

$.magnificPopup.open({
                        items: {
                            src: video,
                            type:'iframe'
                        },
                    })

But YT return error.
In the html of iframe tag I'll see next link:

<iframe class="mfp-iframe" src="//www.youtube.com/embed/http://www.youtube.com/embed/uz8NDWopZyU?autoplay=1" frameborder="0" allowfullscreen=""></iframe>

In advance I don't know what the link is.

question

Source

snnwolf

Most helpful comment

Late to the party, in case someone needs to use the actual embed URL for Magnific, here is my process:

Write a function that gets the input URL, checks it's format and then ensures that the /embed/ url is returned.
In Magnific markup always use the processed URL which is in the embed format.
Add the following patterns to magnific, to essentially use the input URL as the url without processing it further:

// Video popup, Backend enforces embed URL before it gets here.
    $('.js-popup-video').magnificPopup({
        type: 'iframe',
        iframe: {
            patterns: {
                youtube: {
                    index: 'youtube.com/',
                    id: function (url) { return url },
                    src: '%id%'
                },
                vimeo: {
                    index: 'vimeo.com/',
                    id: function (url) { return url },
                    src: '%id%'
                }
            }
        }
    });

WJakub on 6 Mar 2018

👍4

All 8 comments

@snnwolf: Don't use embedded link (http://www.youtube.com/embed/uz8NDWopZyU), use direct link instead (https://www.youtube.com/watch?v=uz8NDWopZyU).

tnhu on 4 Sep 2015

We have a website where the content editors have varying degrees of tech savvy-ness (so to speak). Most hit share to get the url or get the embed link, not using the embed link isn't a solution.

I saw a question about this and it was suggested that you could define your own link types, can you point me in the right direction please? I need to create a solution that supports all possible youtube link types (not the one they're least likely to use when inserting videos into the website).

Thanks

danjaywing on 19 Dec 2016

Ho about link to channel? (http://www.youtube.com/channel/UCYHWmCD-V7iNAKdU6yX4mOg/live)

Krknv on 17 Jan 2017

Late to the party, in case someone needs to use the actual embed URL for Magnific, here is my process:

Write a function that gets the input URL, checks it's format and then ensures that the /embed/ url is returned.
In Magnific markup always use the processed URL which is in the embed format.
Add the following patterns to magnific, to essentially use the input URL as the url without processing it further:

// Video popup, Backend enforces embed URL before it gets here.
    $('.js-popup-video').magnificPopup({
        type: 'iframe',
        iframe: {
            patterns: {
                youtube: {
                    index: 'youtube.com/',
                    id: function (url) { return url },
                    src: '%id%'
                },
                vimeo: {
                    index: 'vimeo.com/',
                    id: function (url) { return url },
                    src: '%id%'
                }
            }
        }
    });

WJakub on 6 Mar 2018

👍4

@WJakub thanks for the info! You're process fixed my problem