2

I'm having problems with having both rel=0 and autoplay=1 added in a YouTube embedded player in a magnific popup.

It seems like it is only the first parameter in the url that is working, and i have tried all these versions:

?rel=0&autoplay=1
?rel=0&autoplay=1
?rel=0?autoplay=1

None of them are working. But if I move autoplay=1 up as the first parameter, then the autoplay works fine - but then the rel=0 doesn't.

Here's my code.

HTML:

<a class="video1" href="https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1"></a>

CSS:

.video1 {
  background-image: url('http://placehold.it/180x180');
  background-repeat: no-repeat;
  background-size: contain;
  height: 180px;
  width: 180px;
  display: block;
  outline: none;
}

JS:

jQuery(document).ready(function ($) {
    $('.video1').magnificPopup({
        type: 'iframe',

    iframe: {
        markup: '<?php echo $first; ?>'+
                '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>'
        },
        callbacks: {
            markupParse: function(template, values, item) {
            values.title = item.el.attr('title');
        }
        }

    });
});
Andreas Søgaard Pedersen
  • 141
  • 1
  • 1
  • 9

2 Answers2

4

Old post but this may help someone:

The issue is that the script is adding the autoplay for you with the ? so if you have something like your example:

https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1

it is rendered as:

https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1?autoplay=1

which causes it to error out. you can modify the magnific script and remove this, search for this line:

www.youtube.com/embed/%id%?autoplay=1

and replace with this:

www.youtube.com/embed/%id%
Nickfmc
  • 369
  • 1
  • 8
  • another update, this may be a better way to handle this than editing the core file https://github.com/dimsemenov/Magnific-Popup/issues/1123#issuecomment-635429123 – Nickfmc Dec 30 '21 at 21:00
0

This seems to work just fine:

jQuery(document).ready(function ($) {
    $('.video1').magnificPopup({
       items: {
          src: '<iframe width="560" height="315" src="https://www.youtube.com/embed/_ziUhNerFMI?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>',
          type: 'inline'
      }
    });
});
.video1 {
  background-image: url('http://placehold.it/180x180');
  background-repeat: no-repeat;
  background-size: contain;
  height: 180px;
  width: 180px;
  display: block;
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<a class="video1" href="https://www.youtube.com/watch?v=_ziUhNerFMI"></a>
odedta
  • 2,430
  • 4
  • 24
  • 51
  • 1
    I can't seem to get autoplay to work correctly on my iPhone. Do you know of a solution for this? – jmchauv Aug 04 '15 at 16:34