Понадобилось мне как-то вставить на сайт видео из YouTube. Сама вставка видео сложностей не вызвало, но подвох был в том, что нужно было просматривать его в PopUp.
Порывшись в гугле, наткнулся на такое решение: использовать fancybox. Вот как это выглядит в коде:
Также на страницу нужно поместить следующий скрипт (со своими классами и ID):
Порывшись в гугле, наткнулся на такое решение: использовать 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/
Комментариев нет:
Отправить комментарий