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 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.
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
- 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&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 += "&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">►</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'>×</div>
</div>
Ganti yang warna kuning 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