Открыть видео в YouTube в Fancybox jquery
Могу ли я открыть видео youtube в fancybox.
У меня есть список ссылок для видео YouTube, например:
<a href="#" onclick="location.href='http://www.youtube.com/watch?v=PvbqV8W96D0'; return false;" class="more">Play</a>
и fancybox:
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
Я не хочу создавать для каждого нового видеообъекта.
Есть ли какой-либо подключаемый модуль или другой способ сделать это?
Ответы
Ответ 1
ЭТО БРОКЕН, ВИДЕТЬ РЕДАКТИРОВАТЬ
<script type="text/javascript">
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'wmode':'transparent','allowfullscreen':'true'}
});
</script>
Таким образом, если пользовательский javascript включен, он открывает fancybox с встраиваемым видео youtube, если javascript отключен, он открывает страницу видео youtube. Если вы хотите, вы можете добавить
target="_blank"
для каждой из ваших ссылок, он не будет проверяться большинством доктринов, но он откроет ссылку в новом окне, если fancybox не подберет ее.
ИЗМЕНИТЬ
this
, выше, не ссылается правильно, поэтому код не найдет href
в разделе this
. Вы должны называть это следующим образом:
$("a.more").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
как описано в http://fancybox.net/blog # 4, воспроизведено выше
Ответ 2
$("a.more").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf', // <--add a comma here
'swf' : {'allowfullscreen':'true'} // <-- flashvars here
});
return false;
});
Ответ 3
Я начал с использования ответов здесь, но изменил его, чтобы использовать новое приложение iframe
YouTube...
$('a.more').on('click', function(event) {
event.preventDefault();
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : this.href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?rel=0&autoplay=1',
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
Ответ 4
Если вы хотите добавить к нему функцию автовоспроизведения. Просто замените
this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
с
this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',
также вы можете сделать то же самое с vimeo
this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'),
с
this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&autoplay=1',
Ответ 5
Это имеет регулярное выражение, поэтому проще просто скопировать и вставить URL-адрес youtube. Отлично подходит для использования CMS для клиентов.
/*fancybox yt video*/
$(".fancybox-video").click(function() {
$.fancybox({
padding: 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 795,
'height' : 447,
'href' : this.href.replace(new RegExp("watch.*v=","i"), "v/"),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
Ответ 6
Тханкс, Александр!
И чтобы установить кнопку fancy-close над флаговым содержимым youtube, добавьте 'wmode' в параметры swf:
'swf': {'allowfullscreen':'true', 'wmode':'transparent'}