Cara Memasang Video Responsive dan Valid HTML5

Redi

Panduan Blog, Seo

Jumat, 31 Januari 2014

Belum ada komentar

Cara Memasang Video Responsive dan Valid HTML5 - Sekarang ini model responsive sedang popular di kalangan blogger ( khususnya blog yang memberikan informasi atau tutor tentang design blog ) , kali ini saya akan memberikan trik bagaimana membuat dan memasang video ( entah itu video youtube maupun video lainya , oh ya saya bukan hanya sekedar memberikan trik responsive pada video , melainkan saya juga akan memberikan trik dan tips cara membuat video youtube maupun video lainya menjadi valid , karena pada umumnya video default yang kita pasang belom valid

Berikut Cara Memasang Video Responsive dan Valid HTML5 :

1. Pertama sobat pasang dulu widget CSS di bawah ini . diatas kode ]]></b:skin> atau </style>

.Video-Responsive {
     position:relative;padding-bottom: 56.25%;
     padding-top:25px;
     height:0;
}
.Video-Responsive iframe, video, object, embed {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
}

2. Setelah anda Memasang CSS nya , sekarang saatnya anda pasang HTML nya untuk memanggil css tadi. Berikut Contoh penerapan kontrol koding pada iframe pada embed video YOUTUBE

<div class="Video-Responsive">
<object data="//www.youtube.com/embed/5nxxWzPSXso" height="329" width="592"></object></div>

Yang Perlu anda Perhatikan dalam kode diatas . anda hanya perlu mengganti url video //www.youtube.com/embed/5nxxWzPSXso dengan url video anda . Bagi anda yang belum tahu cara mendapatkan embed video silahkan googling dulu ( Caranya mudah kok ) kapan-kapan kalau ada waktu lagi saya buatkan tutorialnya 

Berikut merupakan demo hasil Video Responsive dan Valid HTML5 di atas :