Memodifikasi Tampilan Youtube pada Blog

Tidak Ada Tanggapan

Memodifikasi Tampilan Youtube pada Blog - Youtube dikenal sebagai situs penyedia video terbesar di dunia maya. Terbukti, banyak sekali penggunanya termasuk para youtuber's di Indonesia yang kian popular saat ini, Bayu Skak, Raditya Dika, Edho Zell, dan masih banyak lagi,

Dibandingkan dailymotion, youtube masih jauh lebih unggul pada tampilan, kemudahan, dan kualitas video yang ditawarkan. Tentu, youtube merupakan situs video yang resmi disediakan oleh pihak google sendiri.

Pada postingan kali ini, saya akan memberikan tips bagaimana cara untuk mengubah tampilan youtube pada blog. Tak asing, kita sering memposting youtube ke postingan kita, tanpa kita sadar bahwa kita semakin bosan dengan tampilan bawaan. Nah untuk kalian yang ingin mengubahnya, monggo disimak artikelnya.

BERIKUT CARANYA 

1. Seperti biasa, anda login ke blogger.com menggunakan akun anda.

2. Pilih template lalu pilih edit HTML.

3. Letakkan kode dibawah, diatas kode </style>

/* CSS Tampilan Youtube */
.videoyoutube{
    text-align: center;
    background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
    border:1px solid #A8A8A8;
    border-radius:5px;
    margin:20px auto;
    width:80%;
    box-shadow: 1px 30px 30px -26px #818181;
}
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin:8px;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
} 

4. Pada langkah ini, kita gunakan kode javascript, yang bisa anda letakkan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.video-youtube').each(function(){
$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script> 

5. Penggunaanya, anda gunakan kode html dibawah ini.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="www.youtube.com/embed/Tt4fgQdqMFg"></div>
    </div>
    </div> 

6. Selesai, coba dan lihat hasilnya.

---

Nah mungkin cukup sekian, semoga bermanfaat dan apabila terdapat salah kata, mohon maafkan saya.

Source code : http://www.kompiajaib.com/2014/02/modifikasi-tampilan-video-youtube.html