Friday, 31 January 2014

Cara Memasang Video Responsive dan Valid HTML5

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

Cara Memasang Video Responsive dan Valid HTML5

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 :

10 comments:

  1. Selamat Malam Mas Ahmad S. Wah artikel tutorialnya
    Biasa membuat artikel video saya jadi responsive dan valid HTML 5
    Terima kasih yah Mas. salam silaturrahmi :)

    ReplyDelete
  2. wah makasih gan tutorialnya sangat membantu

    ReplyDelete
  3. credit link nya ga ada link ane ya?

    ReplyDelete
    Replies
    1. Ada kok mas ( yaitu di sebelah kanan pojok bawah , hehhehehe :) )

      Delete
    2. oh iya hapus margin-left dan margin-right pada a:link, a:visited :)

      Delete
    3. @Mas Bintang = sudah saya hapus mas margin-left dan margin-right pada a:link, a:visited :)

      BTW itu fungsinya apa ya ..........?

      Delete