Rel=0 and autoplay=1 in YouTube embed player in magnific popup not working
14,012
Solution 1
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>
Solution 2
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%
Author by
Andreas Søgaard Pedersen
Updated on June 04, 2022Comments
-
Andreas Søgaard Pedersen almost 2 years
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'); } } }); });
-
jmchauv almost 9 yearsI can't seem to get autoplay to work correctly on my iPhone. Do you know of a solution for this?
-
Nickfmc over 2 yearsanother update, this may be a better way to handle this than editing the core file github.com/dimsemenov/Magnific-Popup/issues/…