My Youtube Hack comes full circle ...

Tối qua tôi hí hoáy tìm một cái attribute của CSS, rồi tìm cách làm nó tắt mở theo ý mình. Mừng quá sau một hồi thì tìm ra.

Youtube hack của tôi đã come full circle. Khi mở bất cứ một trang nào trong blog lên, Youtube player cũng sẽ load, nhưng bạn sẽ không thấy cái Youtube bar nữa, vì tôi đã giấu nó. Chỉ khi nào người đọc ấn vào một cái link, thì Youtube bar mới hiện lên thường trực, rồi khi bạn sang trang mới nó lại trở về trạng thái ẩn.

Thử ấn vào đây để xem bar hiện ra và nghe nhạc, bài Love So Right của The Bee Gees.

Tôi nghĩ đây là một quy tắc các blogs cần nên theo. Cái gì mà người dùng không cần, thì không nên cho người ta thấy (yet), không thôi thì người xem rối mắt. tôi vô nhiều trang web, thấy lắp ráp nhiều thứ hoa mắt quá, chỉ tốn thời gian người xem phải load vô browser, riết rồi tôi sợ không dám vô mấy cái blogs đó.

Trong trang chỉ dẫn Youtube hack, tôi đã thêm vào một function như sau:

// Make the Youtube player visible or not. Basically at loading time it
// should be off, and only be on whenever the first video is clicked.
function ytVisible(value) {
  attr = (value == true) ? "visible" : "hidden";
  document.getElementById("ytPlayer").style.visibility = attr;
}


Như tôi có nhập đề, function này có một parameter là on=true, hay off=false. Tùy theo trường hợp, nó sẽ tìm cái element có tên là ytPlayer, rồi set style->visibility là visible (true) hay là hidden (false).

Sau khi Youtube player load thành công, tôi giấu nó bằng lệnh sau:

function onYouTubePlayerReady(playerId) {

  ytplayer = document.getElementById("ytPlayer");
  ytplayer.addEventListener("onError", "onPlayerError");
  ytVisible(false);
}
Còn khi bạn ấn vô một link "a", tức là gọi loadVideo(), thì tôi sẽ không giấu tag đó nữa:

function loadVideo(id, num) {

  if(ytplayer) {
    ytVisible(true);
    if (!num) num=0;
   ytplayer.loadVideoById(id, num);
  }
  else // Flash not allowed, call loadVideoWindow
  {
     loadVideoWindow(id);
  }
}

Nếu bạn vẫn thích giữ Youtube bar như xưa, thì bạn chỉ cần xóa hai cái hàng màu đỏ đó đi là xong, hay là bỏ hai dấu // trước dòng đó cũng được (để comment dòng đó out) như sau:

//ytVisible(false);


Mục đích của tôi khi viết Youtube bar là biến Youtube vids từ chỗ coi hình ảnh, chỉ để nghe nhạc mà thôi. Tuy nhiên nếu bạn muốn xem hình cũng được. Bạn phải chỉnh sửa mấy chỗ sau đây:


Ở bước 1: chỉnh hai dòng sau, WIDTH và HEIGHT cho nó rông ra và cao lên

#content-links {
RIGHT: 55px; WIDTH: 230px; height: 8px; POSITION: fixed; BOTTOM: 20px
}

Ở bước 2: chỉnh dòng sau width và height màu đỏ:

// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)

swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&enablejsapi=1&playerapiid=player1",
"videoDiv", "280", "25", "8", null, null, params, atts);


Tất nhiên những thứ ở trên không phải do tôi sáng chế ra, mà cũng phải đi học lóm chỗ khác. Xin thưa, Youtube code là học từ Google Code:
 
http://code.google.com/apis/youtube/js_api_reference.html
 
Còn Javacript thì lắp ráp từ hai quyển: JavaScript: The Definitive Guide 5th Ed. và JavaScript Phrasebook.
 
Hẹn bạn kỳ tới,
 
hoctro.

***