» » » 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 :

About Redi

Hi there! I am Hung Duy and I am a true enthusiast in the areas of SEO and web design. In my personal life I spend time on photography, mountain climbing, snorkeling and dirt bike riding.
«
Next
Newer Post
»
Previous
Older Post

No comments:

Leave a Reply