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

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

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="http://webdesignandsuch.com/posts/fancybox-youtube/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://webdesignandsuch.com/posts/fancybox-youtube/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