Вставляем видео Youtube на сайт в PopUp окне

Понадобилось мне как-то вставить на сайт видео из YouTube. Сама вставка видео сложностей не вызвало, но подвох был в том, что нужно было просматривать его в PopUp.
Порывшись в гугле, наткнулся на такое решение: использовать fancybox. Вот как это выглядит в коде:


<a data-uid="<?php echo $nodeVideo1->nid; ?>"  class="fancyYoutube" href="<?=$linkVideoYouTube?>" title="<?php echo $title ?>" >                       
<?php                            
echo '<object width="560" height="315" id="video_'.$v.'" style="display:none;">                    
<param name="movie" value="https://www.youtube.com/v/'.$v.'?rel=0&wmode=transparent&autoplay=1"></param>                    
<param name="allowFullScreen" value="true"></param>                    
<param name="wmode" value="transparent"></param>                    
<param name="allowScriptAccess" value="always"></param>                    
<embed class="list" src="https://www.youtube.com/v/'.$v.'?rel=0&wmode=transparent&autoplay=1" 
type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="560" height="315">
</embed>                    
</object>';                        
?>
 <span class="b_title"><?php echo $descr; ?></span>
<b></b></a>


Также на страницу нужно поместить следующий скрипт (со своими классами и ID):

$("a.fancyYoutube").click(function() {      
$("#fancybox-title-over").css('padding','20px');
$("#fancybox-title").css('position','relative');    
$("#fancybox-title").css('background-color','#fff');    
$.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'overlayColor'  : '#000',
            'overlayOpacity': '0.9',
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'titlePosition' : 'over',
            'width'         : 560,
            'height'        : 315,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
           'type'          : 'swf',
            'swf'           : {
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });
    return false;
});

Ну и конечно же нужно добавить на сайт fancybox.

http://www.ericmmartin.com/projects/simplemodal/
http://habrahabr.ru/post/45834/

Комментариев нет:

Отправить комментарий