Magnific-popup: Prevent related Youtube videos?

Created on 11 Sep 2015  路  6Comments  路  Source: dimsemenov/Magnific-Popup

Hi, I get the video popup to work, but the "hack" to prevent related videos to show at the end does not work (as it does with an embedded Youtube-link in a regular iframe). Anyone that has a solution to this? Before it was possible to add a "paus" annotation to a video, but seems like Youtube has removed that option now.

question

Most helpful comment

I had the same issue, adding rel=0 stopped the autoplay. So I did this workaround:

  $('.js-home-video .js-popup-youtube').magnificPopup({
    // your default config here

    // All below settings are default except the rel attribute in youtube-src
    // This is here to remove the related videos from showing up after the video ends
    // Adding rel=0 from url in html template stopped autoplay, hence this hack
    iframe: {
      markup: '<div class="mfp-iframe-scaler">'+
        '<div class="mfp-close"></div>'+
        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
        '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button

      patterns: {
        youtube: {
          index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

          id: 'v=', // String that splits URL in a two parts, second part should be %id%
          // Or null - full URL will be returned
          // Or a function that should return %id%, for example:
          // id: function(url) { return 'parsed id'; }

          src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0' // URL that will be set as a source for iframe.
        }
      }
    }
}

All 6 comments

Thank you!


Fr氓n: Dmitry Semenov [mailto:[email protected]]
Skickat: den 11 september 2015 12:40
Till: dimsemenov/Magnific-Popup
Kopia: raffeb
脛mne: Re: [Magnific-Popup] Prevent related Youtube videos? (#727)

iframe.patterns.youtube.src
http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type

rel=0 https://developers.google.com/youtube/player_parameters#rel


Reply to this email directly or view
267> it on GitHub.
owqcJgaJpZM4F7mNt.gif>

@dimsemenov,
"rel=0" is in fact supported on Youtube player...though it is not supported in Magnific Popup:
Look at the screenshot I've attached...what I've done is to modify your own page at:
http://dimsemenov.com/plugins/magnific-popup/

...and added "&rel=0" at the end of the youtube URL.

After doing so, clicking on the link will popup the lightbox BUT the movie is not autoplayed. In fact, clicking the play button results in an error. You should re-open this issue because it is not a "Question" - rather a bug.

image

Hi, @hbi99 is right.

In the line 1623
src: '//www.youtube.com/embed/%id%?autoplay=1'

You can do something like this:
src: '//www.youtube.com/embed/%id%?autoplay=1'&rel=0

I had the same issue, adding rel=0 stopped the autoplay. So I did this workaround:

  $('.js-home-video .js-popup-youtube').magnificPopup({
    // your default config here

    // All below settings are default except the rel attribute in youtube-src
    // This is here to remove the related videos from showing up after the video ends
    // Adding rel=0 from url in html template stopped autoplay, hence this hack
    iframe: {
      markup: '<div class="mfp-iframe-scaler">'+
        '<div class="mfp-close"></div>'+
        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
        '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button

      patterns: {
        youtube: {
          index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

          id: 'v=', // String that splits URL in a two parts, second part should be %id%
          // Or null - full URL will be returned
          // Or a function that should return %id%, for example:
          // id: function(url) { return 'parsed id'; }

          src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0' // URL that will be set as a source for iframe.
        }
      }
    }
}

Hello -

I know this is a little old but this issue still exists where if you define &rel=0 after autoplay the autoplay does not work, whereas in a regular iframe embed it does.

* Edit * Nevermind, it is a browser issue, not the plugin. Works fine in FF but not Chrome unless I update browser settings to allow for autoplay to work.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  5Comments

jglesner picture jglesner  路  3Comments

apasho picture apasho  路  4Comments

samholmes picture samholmes  路  5Comments

Madeirense picture Madeirense  路  6Comments