YouTube 中的 Rel=0 和 autoplay=1 嵌入播放器在 magnific 弹出窗口中不起作用
Rel=0 and autoplay=1 in YouTube embed player in magnific popup not working
我在将 rel=0 和 autoplay=1 添加到 YouTube 嵌入式播放器的精彩弹出窗口中时遇到问题。
似乎只有 url 中的第一个参数有效,我已经尝试了所有这些版本:
?rel=0&autoplay=1
?rel=0&autoplay=1
?rel=0?autoplay=1
None 他们正在工作。但是如果我将 autoplay=1 作为第一个参数向上移动,那么自动播放就可以正常工作了——但是 rel=0 就不行了。
这是我的代码。
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');
}
}
});
});
这似乎工作得很好:
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>
旧 post 但这可能对某人有帮助:
问题是脚本使用 ?所以如果你有类似你的例子的东西:
https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1
呈现为:
https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1?autoplay=1
导致它出错。您可以修改 magnific 脚本并将其删除,搜索此行:
www.youtube.com/embed/%id%?autoplay=1
并替换为:
www.youtube.com/embed/%id%
我在将 rel=0 和 autoplay=1 添加到 YouTube 嵌入式播放器的精彩弹出窗口中时遇到问题。
似乎只有 url 中的第一个参数有效,我已经尝试了所有这些版本:
?rel=0&autoplay=1
?rel=0&autoplay=1
?rel=0?autoplay=1
None 他们正在工作。但是如果我将 autoplay=1 作为第一个参数向上移动,那么自动播放就可以正常工作了——但是 rel=0 就不行了。
这是我的代码。
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');
}
}
});
});
这似乎工作得很好:
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>
旧 post 但这可能对某人有帮助:
问题是脚本使用 ?所以如果你有类似你的例子的东西:
https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1
呈现为:
https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1?autoplay=1
导致它出错。您可以修改 magnific 脚本并将其删除,搜索此行:
www.youtube.com/embed/%id%?autoplay=1
并替换为:
www.youtube.com/embed/%id%