logo
Ganti kemasan produk Anda dengan Kemasan berbahan dasar bambu ramah lingkungan...dimensi bisa request. Lihat GRATIS di DAFTAR HARGA KEMASAN BAMBU

Youtube Responsive Valid HTML5

www.desacilembu.com
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
ARTIKEL TERKAIT : data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,4" data-matched-content-ui-type="image_stacked" data-ad-format="autorelaxed">
Tulisanmu ingin dibayar? Kirim artikelmu ke: troyalfawaz@gmail.com
NOTES: Jika Kolom Komentar Nggak Terbuka, Harap Muat Ulang Halaman ini
Next
« Prev Post
Previous
Next Post »
Copyright © 2008 - DESA CILEMBU | Privacy Policy | Disclaimer | About | DMCA.com Protection Status | Created by Kompi ajaib - Powered by Blogger