Ứng dụng Fancybox xem các video trên Youtube

 

Thật ra Youtube cũng đã cung cấp các đoạn code để các bạn có thể chèn video từ Youtbe vào trang web dễ dàng. Tuy nhiên nếu bạn muốn chèn rất nhiều video trên cùng một trang hoặc bạn muốn thể hiện một cách xem video ấn tượng hơn cho trang web - đó là mỗi video có một hình ảnh minh họa, khi click vào sẽ play đoạn video mà khách truy cập vẫn không rời khỏi trang web của bạn ? Fancybox sẽ là một giải pháp giúp thực hiện điều này dễ dàng hơn bao giờ hết !

Xem Demo || Tải về

Cách thực hiện :

1. Sử dụng thư viện JS của Fancybox cho trang web, chèn đoạn code sau trong thẻ <head>...</head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

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

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

Lưu ý: file fancybox-1.3.4.js và fancybox-1.3.4.css được cung cấp trong file nén ở trên, các bạn tải về up lên host riêng để sử dụng nhé

2. Chèn đoạn code script sau vào đầu hoặc cuối trang để sử dụng Fancybox cho việc thể hiện video

jQuery(document).ready(function() {

    $(".video").click(function() {

        $.fancybox({

            'padding'        : 0,

            'autoScale'        : false,

            'transitionIn'    : 'none',

            'transitionOut'    : 'none',

            'title'            : this.title,

            'width'            : 640,

            'height'        : 385,

            'href'            : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),

            'type'            : 'swf',

            'swf'            : {

            'wmode'                : 'transparent',

            'allowfullscreen'    : 'true'

            }

        });

        return false;

    });

});

Các bạn có thể copy đoạn code này vào một file (vd video.js như trong demo) và chèn vào trang web cũng được

3. Bây giờ là đoạn code để thể hiện video

<a class="video"  title="Play Video" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&amp;autoplay=1"><img src="images/1.jpg" alt="" /></a>

Với đoạn code này, bạn có thể sử dụng chèn nhiều video vào cùng một trang web mà không ảnh hưởng đến diện tích là tốc độ load trang web bằng cách thay link của video từ youtube trong mỗi đoạn code.

Lưu ý:

- Nếu các bạn muốn video tự Play sau khi mở thì chèn thêm đoạn autoplay=1 vào cuối link video nhé

- File images/1.jpg trong đoạn code là ảnh minh họa cho video (bạn có thể thay bằng tiêu đề video tùy thích)

Chúc các bạn thành công !

Bai viết tham khảo từ WebDesignAndSuch - Dịch bởi itdl.blogspot.com

Hướng dẫn sử dụng jQuery Fancybox

Fancybox là plugin giúp thể hiện hình ảnh, hoặc video, nhạc theo style của hệ điều hành MAC.

Xem Demo
| Tải về

Các chức năng chính:

• Tự động thêm bóng vào item khi zoom


• Chức năng nhóm một loạt item và tự thêm menu


• Tùy biến qua file CSS


• Hỗ trợ các kiểu chuyển động với plugin easing

Cách sử dụng

Trước tiên, bạn cần download jQuery và jQuery fancybox. Nếu bạn sử dụng plugin easing, thêm vào trong thẻ <head> như sau: (chú ý đặt thư mục jquery.fancybox cùng cấp với file html)

<!-- FancyBox CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox/jquery.fancybox.css" media="screen" />

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- Easing Plugin -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<!-- Fancybox plugin -->
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>

Mã HTML như sau:

<p>
    Sử dụng cho 1 ảnh <br />

    <a title="Sample title" href="1_b.jpg"><img src="1_s.jpg" /></a>
</p>

<p>
    Sử dụng cho một nhóm các ảnh <br />

    <a rel="group" title="Group title #1" href="2_b.jpg"><img src="2_s.jpg" /></a>
    <a rel="group" title="Group title #2" href="3_b.jpg"><img src="3_s.jpg" /></a>

    <a rel="group" href="4_b.jpg"><img src="4_s.jpg" /></a>
</p>

Và gọi plugin fancybox

$(document).ready(function() {
    $("a").fancybox();
}); 

Nguồn: nTuts