Một số bạn có thể đã tự hỏi làm thế nào để đưa một đoạn video phông cảnh vào phát trong nền của blog thay vì chỉ có một màu hoặc một ảnh nền nhàm chán. Chúng ta có thể làm điều này nhờ vào jQuery plugin Tubular cho phép bạn sử dụng một video từ YouTube như một ảnh nền động của một trang web/ blog.
Xem minh họa
Thủ thuật này rất độc đáo và hấp dẫn nhưng có 3 điều bạn cần lưu tâm:
- Video luôn phát ra âm thanh, nếu muốn tắt âm thanh bạn phải dùng phần mềm cắt bỏ âm thanh rồi tải lên YouTube hoặc dùng phần mềm IDM để tải video không có âm thanh từ YouTube. Khi cài đặt IDM vào máy tính, mỗi khi chơi một video clip trên YouTube, màn hình máy tính sẽ hiển thị nút "
Download video from this page ?", Nhấp vào nút đó, 1 trình đơn hiện ra gồm 2 tệp tin video, tệp tin có dung lượng lớn hơn tệp còn lại chính là tệp video không có âm thanh.
- Khi người xem tải blog cũng đồng thời tải video clip về trình duyệt, điều này có thể làm mất nhiều thời gian hơn để tải blog về trình duyệt. Mặc dù vậy, bạn có thể dùng
phần mền cắt video để làm giảm dung lượng của nó, sau đó tải lên YouTube để lấy làm ảnh nền cho blog của bạn.
- Nó không phù hợp với blog tin tức.
Cách thực hiện:
* Đăng nhập vào blogger.com. Vào chỉnh sửa HTML của blog.
1. Sao chép và dán đoạn mã dưới đây vào
ngay trước thẻ
</head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */
var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';
jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);
jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});
var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;
var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';
jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}
function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('KVGzlhyY-Jo','wrapper-video');
});
//]]>
</script>
2. Tìm đến thẻ
<body>:
Một số mẫu, thẻ <body> có dạng như dưới đây:
<body expr:class='"loading" + data:blog.mobileClass'>
3. Sao chép và dán đoạn mã dưới đây vào
ngay dưới cả 2 thẻ <body> như vừa đề cập trên:
<div id='wrapper-video'>
4. Tìm đến thẻ
</body>
Thêm thẻ
</div> vào
ngay trước thẻ
</body> này.
Lưu thay đổi là xong. Đoạn mã
màu đỏ trên là ID của video trên YouTube. ID này là các ký tự ở cuối đường dẫn của video như hình bên dưới:
Ghi chú: Nếu blog của bạn cũng đang sử dụng JQuery, thủ thuật này có thể bị lỗi. Khi đó, bạn phải xóa JQuery phiên bản khác để tránh trùng lấp hoặc lỗi.
ID của video sử dụng cho blog minh họa là
qREKP9oijWI.
Link:
http://www.youtube.com/watch?v=qREKP9oijWI
Video của Vibay blog tải lên YouTube (Bạn cứ yên tâm cài đặt mà không sợ bị xóa):
http://www.youtube.com/watch?v=KVGzlhyY-Jo (ID:
KVGzlhyY-Jo ).
Nguồn:
JQuery Tubular
