(*) Phiên bản hỗ trợ: phpBB2, punBb, Invision, PhpBB3

Bước 1: Thêm vào CSS: [tip]ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet:[/tip]

Code:

/* fancybox2 - www.fmvi.vn */
.fancybox-wrap,.fancybox-skin,.fancybox-outer,.fancybox-inner,.fancybox-image,.fancybox-wrap iframe,.fancybox-wrap object,.fancybox-nav,.fancybox-nav span,.fancybox-tmp{border:0;outline:none;vertical-align:top;margin:0;padding:0}
.fancybox-wrap{position:absolute;top:0;left:0;z-index:8020}
.fancybox-skin{position:relative;background:#f9f9f9;color:#444;text-shadow:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.fancybox-opened{z-index:8030}
.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5);-moz-box-shadow:0 10px 25px rgba(0,0,0,0.5);box-shadow:0 10px 25px rgba(0,0,0,0.5)}
.fancybox-outer,.fancybox-inner{position:relative}
.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}
.fancybox-error{color:#444;font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;white-space:nowrap;margin:0;padding:15px}
.fancybox-image,.fancybox-iframe{display:block;width:100%;height:100%}
.fancybox-image{max-width:100%;max-height:100%}
#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(http://i12.servimg.com/u/f12/17/70/81/78/fancyb11.png)}
#fancybox-loading{position:fixed;top:50%;left:50%;margin-top:-22px;margin-left:-22px;background-position:0 -108px;opacity:0.8;cursor:pointer;z-index:8060}
#fancybox-loading div{width:44px;height:44px;background:url(http://i12.servimg.com/u/f12/17/70/81/78/fancyb10.gif) center center no-repeat}
.fancybox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;cursor:pointer;z-index:8040}
.fancybox-nav{position:absolute;top:0;width:40%;height:100%;cursor:pointer;text-decoration:none;background:transparent url(http://i12.servimg.com/u/f12/17/70/81/78/blank10.gif);-webkit-tap-highlight-color:rgba(0,0,0,0);z-index:8040}
.fancybox-prev{left:0}
.fancybox-next{right:0}
.fancybox-nav span{position:absolute;top:50%;width:36px;height:34px;margin-top:-18px;cursor:pointer;z-index: 999;visibility:hidden}
.fancybox-prev span{left:10px;background-position:0 -36px}
.fancybox-next span{right:10px;background-position:0 -72px}
.fancybox-tmp{position:absolute;top:-99999px;left:-99999px;visibility:hidden;max-width:99999px;max-height:99999px;overflow:visible!important}
.fancybox-overlay{position:absolute;top:0;left:0;overflow:hidden;display:none;z-index: 999;background:url(http://i12.servimg.com/u/f12/17/70/81/78/fancyb12.png)}
.fancybox-overlay-fixed{position:fixed;bottom:0;right:0}
.fancybox-lock .fancybox-overlay{overflow:auto;overflow-y:scroll}
.fancybox-title{display:none;visibility:hidden;font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative;text-shadow:none;z-index:8050}
.fancybox-title-float-wrap{position:absolute;bottom:0;right:50%;margin-bottom:-35px;z-index: 999;text-align:center}
.fancybox-title-float-wrap .child{display:inline-block;margin-right:-100%;background:rgba(0,0,0,0.8);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 2px #222;color:#FFF;font-weight:700;line-height:24px;white-space:nowrap;padding:2px 20px}
.fancybox-title-outside-wrap{position:relative;margin-top:10px;color:#fff}
.fancybox-title-inside-wrap{padding-top:10px}
.fancybox-title-over-wrap{position:absolute;bottom:0;left:0;color:#fff;background:rgba(0,0,0,.8);padding:10px}
.fancybox-inner,.fancybox-lock{overflow:hidden}
.fancybox-nav:hover span,.fancybox-opened .fancybox-title{visibility:visible}
.fancybox-wrap:hover .fancybox-title{display:block}
#fancybox-buttons{position:fixed;left:0;width:100%;z-index:999}
#fancybox-buttons.top{top:10px}
#fancybox-buttons.bottom{bottom:10px}
#fancybox-buttons ul{background-color:#292626;border:1px solid #111;border-radius:3px 3px 3px 3px;box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset;display:block;height:30px;left:50%;list-style:none outside none;margin-left:-93px;position:absolute;width:166px;padding:3px 0}
#fancybox-buttons ul li{float:left;margin:0;padding:0}
#fancybox-buttons a{display:block;width:30px;height:30px;text-indent:-9999px;background-image:url(http://i12.servimg.com/u/f12/17/70/81/78/fancyb10.png);background-repeat:no-repeat;outline:none;opacity:0.8}
#fancybox-buttons a:hover{opacity:1}
#fancybox-buttons a.btnPrev{background-position:5px 0}
#fancybox-buttons a.btnNext{background-position:-33px 0;border-right:1px solid #3e3e3e}
#fancybox-buttons a.btnPlay{background-position:0 -30px}
#fancybox-buttons a.btnPlayOn{background-position:-30px -30px}
#fancybox-buttons a.btnToggle{background-position:3px -60px;border-left:1px solid #111;border-right:1px solid #3e3e3e;width:35px}
#fancybox-buttons a.btnToggleOn{background-position:-27px -60px}
#fancybox-buttons a.btnClose{border-left:1px solid #111;width:35px;background-position:-56px 0}
#fancybox-buttons a.btnDisabled{opacity:0.4;cursor:default}
.fancy-ytb{position:relative;text-align:center;height:260px}
.fancy-ytb img{width:450px}
.fancy-ytb span{display:block;height:50px;width:50px;background:url(http://i12.servimg.com/u/f12/17/70/81/78/icon_c10.png) no-repeat scroll center center transparent;position:absolute;top:0;left:50%;margin-left:-220px}
.iconPlayer{background:url(http://i12.servimg.com/u/f12/17/70/81/78/play-o10.png) no-repeat scroll center center transparent;display:block;height:80px;left:50%;margin-left:-40px;margin-top:-40px;position:absolute;top:50%;width:80px;z-index:99}
/* queryloader2 - www.fmvi.vn */
#qLoverlay{width:100%;position:fixed;z-index: 999;height:5px;left:0;bottom:0;background-color:#000}
#qLbar{overflow:hidden;height:3px;background-color:red;width:0;min-width:0;margin:1px 0}
#qLtip{position:absolute;text-align:center;background:url(http://i15.servimg.com/u/f15/16/58/89/73/12-28-10.png) no-repeat scroll left top transparent;width:35px;height:32px;top:-32px;color:#fff;font-size:.8em;line-height:25px;margin-left:-17px;display:none;left:0}

Bước 2: Tạo file javascript [tip]ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Add a Javascript Code[/tip]
Title * : Trình chiếu ảnh - video youtube - www.fmvi.vn
Placement : In the topics
Javascript Code * :

Code:

var p = 'entry-content' //Dùng cho punBb

// Chọn code trong đống link phía dưới chèn dưới dòng này

Lấy code từ 1 trong những link sau:

1. Dùng Fancybox không có khung nền xem video: http://tny.cz/2a6999b7
   
2. Dùng Fancybox có khung nền xem video (nền xanh dương nhạt): http://tny.cz/d2ffed51

(*) Hướng dẫn sử dụng cho mọi phiên bản:
Sửa dòng

Code:

var p = 'entry-content' //Dùng cho punBb

thành một trong những dòng dưới để phù hợp với phiên bản bạn đang sử dụng:

Code:

var p = 'content' //Dùng cho phpBB3

Code:

var p = 'postbody' //Dùng cho phpBB2

Code:

var p = 'post-entry' //Dùng cho Invision