Membuat Tampilan Video Youtube di Blog Menjadi 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 Cara Membuat tampilan video Youtube yang responsive, valid HTML5, dan juga seo friendly. Kita hanya 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[
$('.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)