Cara Membuat Video Youtube Responsive Pada Perangkat Mobile - Kita sudah tahu bahwa google sudah mengembangkan algoritmanya sehinga perangkat pencarian di google dan website atau browser sumuanya harus friendly dengan Mobile atau Smartphone.
Tidak luput juga site youtube yang sekarang tenar dan digemari penggunanya, agar bagaimana semua perangkat dan piranti ketika membuka youtube / video youtube yang kita pasang di web / blogspot contohnya bisa diputar atau dibuka juga di versi mobile.
 |
| Cara Membuat Video Youtube Responsive Pada Perangkat Mobile |
Panduan pada halaman web ini akan menunjukkan cara untuk membuat video tertanam YouTube Anda responsif pada semua web browser, tablet, dan telepon menggunakan CSS sederhana video youtube responsive.
Desain web responsif sangat penting. Sejak Google memperbarui algoritma baru yang peringkat website mobile-ramah lebih tinggi pada mereka halaman hasil pencarian Pengembang Web dan pemilik situs web telah mencari metode baru & bagian terbaik dari konten web mereka benar menampilkan pada perangkat mobile atau tablet. Kode CSS pada halaman web ini akan membantu Anda membuat video YouTube Anda pada semua web browser responsif dan ramah-mobile. Jika Anda embded video youtube di website Anda kehabisan darah ke samping atau tidak APPEA di website ini benar pada kode CSS Anda dapat digunakan untuk memperbaiki itu.
Desain web responsif sangat penting. Sejak Google memperbarui algoritma baru yang peringkat website mobile-ramah lebih tinggi pada mereka halaman hasil pencarian Pengembang Web dan pemilik situs web telah mencari metode baru & bagian terbaik dari konten web mereka benar menampilkan pada perangkat mobile atau tablet. Kode CSS pada halaman web ini akan membantu Anda membuat video YouTube Anda pada semua web browser responsif dan ramah-mobile. Jika Anda embded video youtube di website Anda kehabisan darah ke samping atau tidak APPEA di website ini benar pada kode CSS Anda dapat digunakan untuk memperbaiki itu.
Tutorialnya bisa anda lakukan sebagai berikut :
1. Buka style sheet CSS css.styl custom atau halaman.
2. Copy dan paste kode ini ke sheet apprioat CSS website Anda:
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
3. Dapatkan YouTube <iframe> kode Anda menanamkan dan menempatkan video YouTube <iframe> kode ke website Anda.
4. Tambahkan ini wadah HTML sekitar video YouTube <iframe> </ iframe> kode:
<div class="video-container"><iframe>YourYouTubeVideo</iframe></div>
Cara Kerja Kode Tersebut
Pertama kontainer Sebuah video-klip CSS deklarasi menargetkan wadah dan target kedua apa yang di dalam <div> </ div> tag kontainer. Ini Memungkinkan video YouTube yang tertanam untuk skala dan ukuran-ulang. Khusus padding-bottom elemen adalah aturan dari 56,25%, angka ini Dicapai dengan menggunakan aspek rasio video dari 16 * 9, sehingga 9 dibagi dengan 16 = 0,5625 atau 56,25%.
Pertama kontainer Sebuah video-klip CSS deklarasi menargetkan wadah dan target kedua apa yang di dalam <div> </ div> tag kontainer. Ini Memungkinkan video YouTube yang tertanam untuk skala dan ukuran-ulang. Khusus padding-bottom elemen adalah aturan dari 56,25%, angka ini Dicapai dengan menggunakan aspek rasio video dari 16 * 9, sehingga 9 dibagi dengan 16 = 0,5625 atau 56,25%.