1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

WTA - Cara Embed Video Youtube Seperti Ini

Discussion in 'Pemrograman Web' started by ooND, Jan 16, 2014.

  1. ooND

    ooND Super Hero

    Joined:
    Jul 24, 2010
    Messages:
    5,711
    Likes Received:
    1,117
    Location:
    Wonosobo, Jawa Tengah, Indonesia, Indonesia
    Halo mastah2 :)
    mau nanya nih
    ane lagi bikin video site pake php bukan cms,
    1 halaman itu ada 10 video jadi kalo embed video biasa gitu pasti jadi lemot soalnya ngeload 10 video langsung
    nah ane pgnnya videonya itu gk langsung ngeload tapi cuman thumbnailnya doank, kalo klik play baru ngeload video yg di play itu.
    contohnya embed biasa => _http://www.ads-id.com/forums/showthread.php/169439-YouTube-Video-Maker-PP-to-Video-Super-Pack

    contoh yg ane mau kyk di kaskus gini => _http://www.kaskus.co.id/thread/52d72dddf7ca17a62e8b475c

    nah kira2 code nya gmn ya custom nya, ane brosing2 kagak nemu juga

    thank you
     
  2. maxall

    maxall Super Hero

    Joined:
    Mar 4, 2010
    Messages:
    2,380
    Likes Received:
    500
    kasih zip nya sekalian biar mudah bantunya :lol:
     
  3. be_honest

    be_honest Super Hero

    Joined:
    Jun 2, 2009
    Messages:
    1,834
    Likes Received:
    239
    Location:
    cockpit
    Embed youtube with thumbnail mas gan
    _http://stackoverflow.com/questions/2068344/how-to-get-thumbnail-of-youtube-video-link-using-youtube-api
     
  4. rancaf

    rancaf Pejuang Online

    Joined:
    Jan 20, 2012
    Messages:
    790
    Likes Received:
    33
    Location:
    tapanuli tengah
    caranya mudah gan, tinggal set autoplaynya ke 0

    like this hxxp://yusuf.com/v/EBM854BTGL0&autoplay=1

    jadi

    hxxp://yusuf.com/v/EBM854BTGL0&autoplay=0
     
    vivovace likes this.
  5. ooND

    ooND Super Hero

    Joined:
    Jul 24, 2010
    Messages:
    5,711
    Likes Received:
    1,117
    Location:
    Wonosobo, Jawa Tengah, Indonesia, Indonesia
    udah dibikin gitu om tapi itu kan cuman biar gk langsung ngeplay
    maksudnya itu yg kyk di kaskus itu coba di klik kanan
    itu kyk image
    kalo yg di ads-id di klik kanan gk bisa kyk image :D
    ane bgng jelasinnya :lol:
    iya om cara ambil url thumb nya udah ngerti cuman penerapannya :lol:
    serius mastah :lol:
    ane kasih login cpanel aja kalo beneran soalnya install nya seting sana sini kelamaan
    maklum script dapet download di google mau custom puyeng sendiri, kode embednya di file .php
    dipanggil di file .tpl :lol:
     
  6. adjie1258

    adjie1258 Super Hero

    Joined:
    Aug 16, 2010
    Messages:
    778
    Likes Received:
    35
    Location:
    http://najiullah.com
    mudah2an ini yang dimaksud: _http://www.labnol.org/internet/light-youtube-embeds/27941/ jujur aja sih, ane sendiri blm nyoba om,... :p kabar2in yah klo sukses, ane juga mau nyoba klo dah sukses,... :)
     
    ooND likes this.
  7. gudel

    gudel AdSense Pro

    Joined:
    Dec 13, 2012
    Messages:
    301
    Likes Received:
    25
    Nggawe oembed.

    _http://www.youtube.com/oembed?url=http://youtube.com/watch?v=1PAwGi6p3KE
     
  8. ooND

    ooND Super Hero

    Joined:
    Jul 24, 2010
    Messages:
    5,711
    Likes Received:
    1,117
    Location:
    Wonosobo, Jawa Tengah, Indonesia, Indonesia
    nah ini om bener :D udah sukses kalo 1 page 1 video,
    kalo banyak video ada juga tutornya di situ tapi blm ane coba, rada ribet script ane misah2 :D thank you
    thanks pak :D
     
  9. kohkono

    kohkono Super Hero

    Joined:
    Sep 13, 2010
    Messages:
    1,259
    Likes Received:
    432
    Location:
    Carving Rock City
    udah pada dijawab.... kalau gitu yuk semua.... Pokoke jogeeeeeeeet............:lol::lol::lol:
     
  10. nekaters

    nekaters Hero

    Joined:
    Aug 12, 2012
    Messages:
    682
    Likes Received:
    31
    Location:
    Yogyakarta
    itu dia main JS ama CSS, coba contek aja sourcenya
     
  11. ooND

    ooND Super Hero

    Joined:
    Jul 24, 2010
    Messages:
    5,711
    Likes Received:
    1,117
    Location:
    Wonosobo, Jawa Tengah, Indonesia, Indonesia
    :lol: sehat pak?

    kalo css nya ane mudeng cara ambilnya, kalo js nya bgng caranya om, yg mana lagi js gk paham
     
  12. nekaters

    nekaters Hero

    Joined:
    Aug 12, 2012
    Messages:
    682
    Likes Received:
    31
    Location:
    Yogyakarta
    itu jsnya ada di divnya kok, eh js pa jquery ya, :D pokoke ada di divnya onclick apa gtu lupa ane

    Sent from my N986
     
  13. ooND

    ooND Super Hero

    Joined:
    Jul 24, 2010
    Messages:
    5,711
    Likes Received:
    1,117
    Location:
    Wonosobo, Jawa Tengah, Indonesia, Indonesia
    udah bisa di coba di single page

    pas di masukin ke script ane gk jalan :lol:
    susah nih script pake pisah2 segala kode2nya

    Code:
    <div onclick="this.nextSibling.style.display='block'; this.style.display='none'" style="width: 728px;height;410px;top:-68px;bottom:-68px;position:absolute;margin: 0 auto;display:inline-block;"><div style="position:relative;cursor:pointer;display:inline-block"><img src="http://img.youtube.com/vi/84nruE_XLTY/hqdefault.jpg" style="width:728px;"/><i style="background:url(data:image/png;base64,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) no-repeat;filter:alpha(opacity=80);opacity:.8;height:77px;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;;"></i></div></div><div style="display:none"><iframe width="728" height="410" frameborder="0" allowfullscreen="1" src="http://www.youtube.com/embed/84nruE_XLTY?showinfo=0&iv_load_policy=3&modestbranding=1&nologo=1&vq=large&autoplay=1&ps=docs"></iframe></div>
    
    
     
  14. nekaters

    nekaters Hero

    Joined:
    Aug 12, 2012
    Messages:
    682
    Likes Received:
    31
    Location:
    Yogyakarta
    ane dah coba tp plus edit2 juga berhasil sih, coba referensi ini lebih simpel, tinggal mainin aja cssnya
    Code:
    http://delcoursolutions.tumblr.com/post/44655455171/change-the-youtube-embed-image-to-custom-image
     
    ooND likes this.
  15. dutosolo

    dutosolo Super Hero

    Joined:
    Jan 10, 2012
    Messages:
    2,010
    Likes Received:
    2,369
    Location:
    omkicau.com
    Ya ampun... ada CMS yang mudah2 kok ya cari yang syusah2 ta Om heheheh.....
     
  16. julypur

    julypur Hero

    Joined:
    Sep 30, 2013
    Messages:
    580
    Likes Received:
    11
    Location:
    purworejo
    saya nyimak aja deh newbe banget hal gituan gan
     
  17. ooND

    ooND Super Hero

    Joined:
    Jul 24, 2010
    Messages:
    5,711
    Likes Received:
    1,117
    Location:
    Wonosobo, Jawa Tengah, Indonesia, Indonesia
    :lol:
    kalo pake WP sama aja masih custom banyak om,

    yg ini mlh gk bisa om, yg sebelumnya udah bisa cuman di pasang di script ane mlh gknongol :lol:

    sama om :malu:
     
  18. eboot

    eboot AdSense Fan

    Joined:
    Aug 7, 2012
    Messages:
    117
    Likes Received:
    3
    wah, keren, keren :D nyimak dulu, siapa tau ketularan :D
     
  19. gusadit

    gusadit Super Newbie

    Joined:
    Mar 27, 2012
    Messages:
    393
    Likes Received:
    15
    Location:
    Amlapura, Bali
    Coba pake cara ini om. Ane coba buatin di jsfiddle.
    __http://jsfiddle.net/gusadit/3L7bs/
    Agan ntar cuma ubah beberapa hal:
    • data-target = Video_Id Youtube, Biasanya ada di belakang URL video youtube contohnya __http://www.youtube.com/watch?v=VIDEO_ID.
    • data-width = player width
    • data-height = player height

    Misalnya:
    Code:
    <div data-target="VIDEO_ID1" data-width="640" data-height="360" class="youtube-wrapper">
    </div>
    <div data-target="VIDEO_ID2" data-width="600" data-height="400" class="youtube-wrapper">
    </div>
    <div data-target="VIDEO_ID3" data-width="1028" data-height="768" class="youtube-wrapper">
    </div>
    dst..
    
    Maaf jika codenya masih ada yang salah dan berantakan. Maklum masih newbie :)
     
    Last edited: Jan 20, 2014
    ooND likes this.
  20. nekaters

    nekaters Hero

    Joined:
    Aug 12, 2012
    Messages:
    682
    Likes Received:
    31
    Location:
    Yogyakarta
    punya ane sukses kok pake cara itu :D cm main css lg, btw atas itu keren pake jquerynya, hasilnya sama jg
     
    ooND likes this.

Share This Page