Skip to main content

Modifikasi Tampilan Video Youtube Responsive Valid HTML5 Seo Friendly

Seiring dengan makin berkembangnya era responsive di dunia internet, maka satu hal yang perlu mengikuti perkembangan zaman adalah embed video pada website. Salah satu website yang menyediakan embed video untuk disimpan di website adalah Youtube.

Nah kali ini saya akan share modifikasi tampilan video Youtube yang responsive, valid HTML5, dan juga seo friendly.

Sebenarnya beberapa waktu yang lalu saya sudah share cara memodifikasi tampilan video Youtube ini, namun videonya belum responsive, untuk mengingatnya kembali silahkan simak postingannya pada link di bawah ini.

Nah kali ini kita akan menambahkan sedikit kode agar videonya menjadi responsive dan modifikasi yang dipakai yaitu modifikasi pada link kedua yaitu Modifikasi Tampilan Video Youtube Di Blog.

Agar tampilannya tetap sama namun menjadi responsive, silahkan gunakan kode CSS di bawah ini:


.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;
}

Untuk kode padding-bottom:56.25% pada CSS .video-responsive silahkan simak penjelasannya dari sumbernya pada link di bawah postingan ini. Kemudian silahkan gunakan kode HTML di bawah ini untuk memunculkan videonya di postingan:


<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/fcr2VSNf7LI"></div>
    </div>
    </div>
Silahkan ganti URL embed videonya dengan URL embed video yang Anda ingin tampilkan.

Kemudian simpan kode javascript iframe loader video Youtube di bawah ini 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>

Dan jangan lupa blog Anda sudah dilengkapi dengan jquery library seperti di bawah ini (berapa pun versinya)


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Selesai....

Sebagai LIVE DEMO-nya silahkan nikmati video Geisha - Lumpuhkan Ingatanku di bawah ini. Silahkan coba resize layar monitor Anda dengan menekan tombol CTRL + Scroll Atas / Bawah pada keyboard dan mouse Anda, atau coba test halaman ini dengan responsive tool.


Resource: http://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB