我正在使用 Fancybox 插件在模态上播放视频。这很容易实现在台式机和平板电脑上播放视频的要求。但是在移动设备上,而不是显示模态窗口,视频应该在单击链接时自动以全屏模式播放。我尝试在移动设备中禁用插件,希望youtube在用户重定向时自动以全屏模式打开它。但是没有用。
我怎样才能做到这一点?或者这实际上是可能的吗?
这是jQuery
$(function () {
var jWindow = $(window);
$(".youtube-media").click(function () {
if (jWindow.width() <= 768)
return;
$.fancybox({
'padding': 2, 'autoScale': true, 'transitionIn': 'none', 'transitionOut': 'none', 'title': this.title,
'width': 600, 'height': 340, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf', 'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
});
以下是HTML代码
<a class="youtube-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Play Video</a>
答案 0 :(得分:8)
为了实现跨设备兼容性,我宁愿以embed
格式使用youtube,因此您可以使用此html格式将其打开为iframe
:
<a class="youtube-media" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1&wmode=opaque&fs=1">youtube</a>
请注意,我还添加了参数&fs=1
以添加全屏支持。
然后这个脚本应该做的伎俩:
$(".youtube-media").on("click", function (e) {
var jWindow = $(window).width();
if ( jWindow <= 768 ) {
return;
}
$.fancybox({
href: this.href,
type: "iframe" // when using embed format
});
return false;
});
以小格式查看此 JSFIDDLE ,因此youtube应为全屏(小于768px时为results
区域)。然后以大格式查看此 JSFIDDLE ,以便youtube显示在fancybox中。
注意:.on()
需要jQuery v1.7 +