Как отобразить видео Youtube в лайтбоксе jQuery (Wordpress)?

Question

Я пробовал lightbox-plus, fancybox и т. Д. *

Но я не мог понять, как это сделать.

Эти видео представляют собой сообщения с ссылкой на видео с YouTube.:

<p><a href="http://www.youtube.com/watch?v=zUN826BdvV4">
<img class="alignnone size-thumbnail wp-image-40" 
title="Screenshot" src="http://localhost/custom-post-type/
wp-content/uploads/2011/01/Screenshot2-150x150.png" 
alt="" width="150" height="150" /></a></p>

Например, Fancybox для Wordpress , позвольте мне добавить лайтбокс к изображениям, но если изображение ссылается на видео с YouTube, оно не работает.

Есть предложения?

Answer 1

Простой способ сделать это - использовать PrettyPhoto ( ссылка на сайт , ссылка на плагин wordpress ).Активировать просто:

$('a[rel="prettyPhoto"], .myvideolinkclass').prettyPhoto();

И HTML довольно чистый:

<a href="http://youtube.com/a-real-youtube-link" rel="prettyPhoto[youtube]">My Awesome Youtube Video</a>

Answer 2

Вы видели блог FancyBox?Там есть пример видео на YouTube в Fancybox:

http://fancybox.net/blog

Тег сценария для импорта FancyBox:

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>

JavaScript / Jquery для привязки события клика:

$("#tip4").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;
});

HTML:

<a id="tip4" title="'Zombieland' Trailer"
    href="http://www.youtube.com/watch?v=071KqJu7WVo&amp;feature=player_embedded#at=41">
        Try now
</a>

Answer 3

Я разобрался как :

<div style="text-align: center;"><a class="fancybox" href="#welcomevideo"><img src="http://www.howieolson.com/wp-content/uploads/2010/04/howie-olsen-welcome-video.jpg" width="251px" height="188px" alt="Welcome To High Output"></a></div>

<div style="display:none" id="welcomevideo">
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
</div>

Кажется, что он работает со ссылками со встроенным контентом, прикрепленным к нему.

(Пожалуйста, дайте мне знать, если естьлучшее решение для этого).