• Beranda

Belajar Blog

  • Blogger
    • Download Template
    • Panduan Blog
    • Trik Mudah SEO
    • Widget
  • Edukasi
    • Buku BSE
    • Info PPDB
    • Makalah
    • Pantun
    • Puisi
  • Game
    • Arcade
    • Batle
    • Racing
    • Sport
  • Cheat
  • TOOL
    • Compress CSS
    • Kode Warna
  • Error
Home » Panduan Blog » Seo » Cara Memasang Video Responsive dan Valid HTML5
Jumat, 31 Januari 2014

Cara Memasang Video Responsive dan Valid HTML5

kak sakti
Panduan Blog, Seo
Jumat, 31 Januari 2014
add comment
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 :

Share this article :
Tweet
✚

Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon Request Out Of Topic

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Selamat Datang Di Belajar Blog Pemula




Tutorial Apapun Tentang Blog

  • Cara Pasang Widget Al-Qur'an pada Blog
  • Cara Buat Related Post atau Artikel Terkait
  • Cara Memasang Facebook Like Badge
  • Cara Membuat Auto Read More Pada Blog
  • Cara Membuat Recent Post Animasi
  • Download Game Flappy Bird Populer

Arsip Blog

  • ▼  2014 (53)
    • ►  Mei (1)
    • ►  April (9)
    • ►  Maret (8)
    • ►  Februari (10)
    • ▼  Januari (25)
      • Cara Memasang Video Responsive dan Valid HTML5
      • Membuat Popular Post Keren Ala Kompi Ajaib
      • Cara Membuat Scroll Timer Pada Blog
      • BAGAS31.com, Tempatnya Download Software Gratis
      • Cara Membuat Daftar Isi di Blog Secara Otomatis
      • Cara Membuat Title Pada Breadcrumbs
      • Membuat Auto Readmore dengan Post Snippet
      • Download Template Bule Faster SEO Responsive
      • Cara Membuat icon Author comment
      • Trik Auto Heading H1 so that become Heading Article
      • Cara Membuat Menu Header Responsive
      • Membuat Auto Read-More dengan Bantuan TextArea
      • Materi Senam Lantai Kelas X Semester 2
      • Membuat Artikel Terkait Ala Kang Ismet
      • Free Download Template SEO Keren Terbaru 2014
      • Cara Memasang Tools Kode Warna Di Blog
      • Download Template simple Templateku Mas Sugeng
      • Download Template Simple Fast 2014 Responsive
      • Macam Macam Kode Warna
      • Membuat Tampilan Posting Berbeda-Beda Berdasarkan ...
      • Cara Membuat Demo JSFiddle di Blog dengan JQuery
      • Cara Membuat Notifikasi Komentar Ala Google Plus
      • Request Tutorial Tentang Blogger
      • Admin Ahmad Suyadi Minta Maaf Kepada Kang Ismet
      • Membuat Auto Read More dengan Gambar tanpa Javascript
  • ►  2013 (97)
    • ►  Desember (40)
    • ►  November (30)
    • ►  Oktober (27)

Article Populer

Belajar Blog Profeesional

Kecantikan & Kesehatan Official

Artikel Terbaru

BREAKING NEWS :
Loading...

Join with us

Temukan Saya Di Facebook

Mengenai Saya

kak sakti
Lihat profil lengkapku

Kategori

  • Android
  • Chatting
  • Download Game
  • Download Lagu
  • Download Template
  • Facebook
  • Google Adsense
  • jQuery
  • Kontes Seo
  • Opini
  • Panduan Blog
  • Password PS2
  • Penjasorkes
  • PPDB
  • Premium
  • Request
  • Sea games
  • sejarah
  • Seo
  • Sepak Bola
  • Software
  • Sport
  • Twitter
  • Widget

New Artikel

Membuat link Bro
saktikaromah@2018. Diberdayakan oleh Blogger.

Copyright © Belajar Blog - Template by saktikaromah | Powered by Blogger