Jumat, 26 Maret 2010

EMBEDDING YOUTUBE LINKS FOR BLOGSPOT

Pic by Hoctro'sLong time not see Hoctro's. Lama tak melihat blognya master satu ini :( Iseng-iseng main deh kesana, ada lagi trik yang GAYA :)) Kenal sama YouTube tidak :-/ Iyah bener YouTube tempat menyimpan video-video yang asoy geboy itu :p Vietnam salah satu negara tetangga kita master ini berasal. Trik dan hack yang selalu dikeluarkannya selalu membuat BeBeN si bloglang ganteng kalem ini tekesima dibuatnya :x

Coba klik beberapa link yang ada dibawah ini...

"In 1985, a team of superstars gathered together to record the song"We Are the World". The song itself was a collaboration between Michael Jackson (Billie Jean, Beat It) and Lionel Richie (Hello, Dancing on the ceiling, etc.)"

Kalau BeBeN benar memasangnya maka, sobat bisa mendengarkan list-list lagu dan juga embed video yang berasal dari web U-Tube tanpa harus meninggalkan blog gitoh :-bd Dengan hanya memasukan link dengan memanggil ID lagu/video yang kita sukai, kita sudah dapat bersuka youtube ria :D ReaL-DeMo.

  1. Masukan beberapa kode CSS berikut diatas/sebelum kode ]]></b:skin>
  2. #videoDiv {
    margin-right: 3px;
    }
    #videoInfo {
    margin-left: 3px;
    }
    #content-links {
    RIGHT: 55px; width: 230px; height: 8px; POSITION: fixed; BOTTOM: 20px
    }
    Kode tersebut akan menampilkan control tune of youtube berada diam dipojok kanan bawah. Kalau sobat mau berkreasi sendiri juga tidak apa-apa mau di pojok kanan atas..bisa, mau dipojok bawah kiri..bisa etc
  3. Masukan javascript berikut dibawah/sesudah kode ]]></b:skin>
  4. <script src="http://www.google.com/jsapi" type="text/javascript" />
    <script type='text/javascript'>
    google.load("swfobject", "2.1");

    </script>
    <script type="text/javascript">
    /*
    * Change out the video that is playing
    */

    // Update a particular HTML element with a new value
    function updateHTML(elmId, value) {
    document.getElementById(elmId).innerHTML = value;
    }

    // Loads the selected video into the player.

    function loadVideo(id, num) {

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

    // Open a new window in case the video doesn't allow embedding
    // or for peaceful degradation purposes
    function loadVideoWindow(id) {
    var ytlink;
    var newwindow;
    ytlink = "http://www.youtube.com/watch?v=" + id;
    newwindow=window.open(ytlink,'name','height=600,width=700');
    if (window.focus) {newwindow.focus()}
    }
    // This function is called when an error is thrown by the player
    function onPlayerError(errorCode) {
    alert("An error occured of type:" + errorCode);
    }

    // This function is automatically called by the player once it loads
    function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytPlayer");
    ytplayer.addEventListener("onError", "onPlayerError");
    }

    // The "main method" of this sample. Called when someone clicks "Run".
    function loadPlayer() {
    // The video to load
    var videoID = "jfivtWEAyrk"
    // Lets Flash from another domain call JavaScript
    var params = { allowScriptAccess: "always" };
    // The element id of the Flash embed
    var atts = { id: "ytPlayer" };
    // 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);
    }
    function _run() {
    loadPlayer();
    }
    google.setOnLoadCallback(_run);

    </script>
    Perhatikan tulisan tebal yang berwarna biru!!! Itulah ID U-Tubenya sobat. Kalau sobat mau menggantinya, ya silahkan pilih-pilih dulu di YouTube Music. Dan lihat di address bar, lihat yang paling dibelakang. L-)

  5. Setelah itu masukan kode HTML berikut diatas/sebelum tag </body>
  6. <div id='content-links'>
    <div id='videoDiv'>Loading... </div>
    </div>
  7. Langkah terakhirnya, yaitu memasukan link berupa syntax sederhana kedalam postingan supaya waktu membaca artikel bisa juga ber-youtube ;)).
  8. <a href="javascript:void(0);" onclick="loadVideo('YoutubeID');">Nama Lagu</a>
    Ganti tulisan yang bercetak tebalnya :) Kalau mau membuat satu halaman khusus tentang lagu dan video-video sobat sendiri tinggal panggil saja dengan rumus syntax seperti itu. Bisa juga dengan varibel seperti berikut...
    <li><a href="javascript:void(0);" onclick="loadVideo('YoutubeID');">Nama Lagu</a></li>

    Cheers and c u :-h

Tidak ada komentar:

Posting Komentar