DESA CILEMBU

Youtube Responsive Valid HTML5

Cara Pasang Youtube Responsive Valid HTML5
Alternatif tampilan Youtube ala blognya mang Lembu memang sangat simpel, unik dan yang pasti responsif, yang lebih menakjubkan lagi dengan menggunakan tampilan youtube model yang saya pakai ini valid HTML5(silahkan riceking di W3C), mantap banget kan. Dari jutaan blogger yang sering mampir, kurang lebih 12.987 blogger yang bertanya dan meminta mamang membagikan tutorial cara pasang tampilan youtube ala mamang tea.
Salah satu yang membuat mamang tidak tahan untuk segera share tutorial tampilan youtube ini, datang dari +Mbak Susi di artikel Panorama bumi perkemahan Panenjoan, saking gemesnya pengen ikutan pasang, beliau sampe beberapa kali bertanya, bahkan sempat mengirim parsel buah-buahan segar plus kunci Honda Jazz RSS(gratipikasi gituh deh.....heuydeuh.
Tampilan Youtube
Tampilan Youtube Responsive Valid HTML5 ala mang Lembu ini miliknya kang +Adhy Suryadi (www.kompiajaib.com,) mudah-mudahan kang Adhy udah baca permohonan ijin ng'linknya.
ini tampilan youtube nya, silahkan dinikmati mumpung masih anget.
Play Video
×
Cara pasang tampilan Youtube Responsive Valid HTML5
  • masuk edit HTML
  • pasang kode Javascript, diantara kode Javascript yang udah ada sebelumnya
  • Pasang kode CSS, diantaranya juga.
  • Simpan
Untung memasang tampilan Youtube ini dalam artikel.
  • Buat artikel baru
  • Copas kode HTML, pada HTML bukan Compose loch ya.
  • Pratinjau artikel yang sedang di tulis untuk meyakinkan apakah sudah benar cara memasang tampilan youtube ala mang Lembu nya.
Kode JavaScript
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.videoplayer').each(function(){
$(this).replaceWith('<iframe class="videoplayer loader" src="'+$(this).data('src')+'?enablejsapi=1&version=3&playerapiid=ytplayer" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},1000);
//]]>
</script>
<script type='text/javascript'>
$(function() {
    $('.playvideo2').click(function(ev){
    $('.videoyoutubeContainer2').show();
    $('.playvideo2').hide();
    $('.videoyoutube2').css({top:'15%',position:'fixed'});
        $(".videoplayer")[0].src += "&amp;autoplay=1";
        ev.preventDefault();
});
    $('.close-video2').click(function(){
       $('.videoyoutubeContainer2').hide();
        $('.playvideo2').show();
        $('.videoyoutube2').css({top:'-1000px',position:'absolute'});
        $('.videoplayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
});
</script>
Kode CSS
.video-responsive {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;margin:8px;}
.video-responsive iframe,.video-responsive object {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border:0;}
.playvideo2{padding:0;margin:30px auto;color:#aaa;cursor:pointer;transition:all .4s ease-in-out;max-width:320px;height:80px; background:#eee;border-radius:5px;padding:10px;border:1px solid #ddd;clear:both}
.play{border:6px solid #aaa;border-radius:50%;font-size:280%;line-height:70px;display:inline-block;height:70px;width:70px;text-align:center;transition:all .4s ease-in-out;}
.playvideo2:hover{background:#ddd;border:1px solid #999;}
.playvideo2:hover .play{border:6px solid #444;color:#444;}
.playvideo2:hover .playtext{color:#444;}
.playtext{font-size:280%;line-height:70px;display:inline-block;margin-left:10px;transition:all .4s ease-in-out;}
.videoyoutube2{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border-radius:5px;width:50%;box-shadow: 1px 30px 30px -26px #000;position: absolute;left:50%;margin-left:-25%;top:-1000px;z-index:9999;transition: all 0.4s ease-in-out;}
.videoyoutubeContainer2{position:fixed;left:0;right:0;bottom:0;top:0;background:transparent;background:rgba(0, 0, 0, 0.5); display:none; z-index:9999;transition: all 0.4s ease-in-out;}
.close-video2{position: absolute;top:-18px;right:-20px;color:#333;font-family:Arial;font-weight:700;border-radius:50%;background:#fff;font-size:22px;height:20px;width:20px;line-height:20px;text-align:center;cursor:pointer;}
.close-video2:hover{color:red;}
Kode HTML
<div class="playvideo2">
<span class="play">&#9658;</span><span class="playtext">Play Video</span>
    </div>
<div class="videoyoutubeContainer2"></div>
<div class="videoyoutube2">
<div class="video-responsive">
<div class="videoplayer loader" data-src="//www.youtube.com/embed/fcr2VSNf7LI"></div>
    </div>
    <div class='close-video2' title='Close'>&#215;</div>
    </div>
Ganti //www.youtube.com/embed/fcr2VSNf7LI dengan kode Youtube yang ingin ditayangkan.
Selamat mencoba tampilan Youtube Responsive Valid HTML5 ala mang lembu semoga berhasil

Sumber :http://www.kompiajaib.com/2014/07/alternative-lain-manipulasi-tampilan-video-youtube.html

Enter your email address to get update from DESA CILEMBU.
Print PDF
Next
« Prev Post
Previous
Next Post »

35 komentar

jadi loading nya juga bisa berkurang ya kang karena tampilan yutube nya seperti di hideen gitu... nanti mau nyoba ah ... makasih kang :D

Balas

Jadi lebih ringan ya Kang youtube kalau sudah responsive
Saya sudah lama pasang scriptnya Kang Adhy ini Kang
Makasih sudah share di blog Akang, jadi teman yg lain akan
Lebih mengunakan video youtube yg responsive :-bd

Balas

Walah tu Fotonya Mbak Susi jadi Figuran script responsive ini ya Kang? =D

Balas

justru yang jadi figuran mah kang Saud, beliau mah bintangnya

Balas

lumayan ringan kalau di bandingin dengan yang umum mah kang.
valid HTML5 juga yang bikin melejit ke page

Balas

hiyah, di kang Adhy malah lebih gamblang juga ko'

Balas

wah lumayan banyak juga nih kode script nya, bikin pucing deh :D

Balas

haduh mang diaku mah moal kuateunnn bujeng2 ngayutub.... ngeblog ge hese...:(

Balas

beuh..karunya teuing ci eneng teh atuh...:D

Balas

yang paling pusing pasti kang Adhy deh kak..:D

Balas

monggo masih anget yanag berminat silakan langsung comot...gratis :D

Balas

Wah pak lembu memang baik ati deh
Akhirnya dapet juga nih caranya, sip dan makasih ya pak
Nanti saya coba habis selesai masak hehe :)

Balas

Ih pak, fotonya mending dicopot aja :)

Balas

ringan dan keren kode css dan html nya kang....

Balas

Wah..... kalau pakai kode CSS youtubenya jadi ringan banget nih tampilannya.

Salam

Balas

muantab hasil tampilannya dan bisa menjadi daya tarik tersendiri untuk pengunjung blog. makasih atas tutorialnya. keep nice info and keep spirits for better blogging.

Balas

loh...itu kok potonya mbak susi ya,,,hehehehe

Balas

Wah bisa pasang youtube juga di blog.. Loading blognya gk tambah berat tuh Mas?

Balas

wow keren sampai dapat kiriman parsel.kwkwkw

Balas

gimana kerasanya pas kang Ria maen kesinih...enteng kan? :D

Balas

Alhamdulillah, akhirnya muncul juga artikelnya, tu mah termasuk saya kang yang rekues, sampai iden beberapa bulan loh... fiuhhhh akire nongol juga....

Balas

Kang mau tanya kode javascript sama css itu tepatnya d taruh mana? biar yg awam kaya saya bisa mencobanya, terimakasih

Balas

cari di edit HTML kode awalannya, kalau udah ketemu..pastekan kode Javascript dan Css nya di atas kode awalan tadi.
contohnya javascriptkode awalnya
......'text/javascript'......)....Css juga sama caranya

Balas

ini baru wow, soalnya saya suka banget pasang video di setiap post :)

Balas

Kalau tampil videonya tanpa memakai pop up seperti demo, bagai mana mang... langsung tampil di blog post valid html 5

Balas

Wah saya pengin coba tapi ko masih bingung cara pasang kode script nya ni mang!!

Balas

Siip Mang ini jenis artikel yang langka....tampilan videonya responsive bisa menyesuikan layar di berbagai ukuran pikxel jika di play via seluler....

Balas

beliau sampe beberapa kali bertanya, bahkan sempat mengirim parsel buah-buahan segar plus kunci Honda Jazz RSS(gratipikasi gituh deh.....heuydeuh. .......ini bahaya....Tak laporin sama nyonya Mang lembu lho....

Balas

Amankeun hela euy... hatur nuhun mang atos diposting :D

Balas

Mang kalau misal kode javascriptnya saya linkan ke google drive,, bisa kan ?? biar gak berat dan gak banyak kode di template gituhhh

Balas

cobain ajah,kalau hasilnya oke kan bisa dibuat postingannya.

Balas

Wahhh, ini ok banget. Saya memang jarang masang video di postingan, takut berat.tapi kodenya lumayan ya mang heee

Balas

Kalau bahasa anak peprograman sedot langsung gan ilmunya hehe, emang tampilan responsive bikin load nya lebih ringan hehe, mantap mang hehe

Balas

Copyright © 2008 - DESA CILEMBU | Privacy Policy | Disclaimer | About | Created by Kompi ajaib - Powered by Blogger