Cara Pasang 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 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

1. masuk edit HTML
2. pasang kode Javascript, diantara kode Javascript yang udah ada sebelumnya
3. Pasang kode CSS, diantaranya juga.
4. Simpan

Untuk memasang tampilan Youtube ini dalam artikel.

1. Buat artikel baru
Copas kode HTML, pada HTML bukan Compose loch ya.
2. 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 += "&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 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