Saya memiliki video YouTube yang tertanam di situs web kami dan ketika saya mengecilkan layar ke ukuran tablet atau ponsel, ia berhenti menyusut sekitar 560px lebarnya. Apakah standar ini untuk video YouTube atau ada sesuatu yang dapat saya tambahkan ke kode untuk membuatnya lebih kecil?
youtube
responsive-design
embed
MattM
sumber
sumber
Jawaban:
Anda dapat membuat video YouTube responsif dengan CSS. Bungkus iframe dalam div dengan kelas "videowrapper" dan terapkan gaya berikut:
Div .videowrapper harus berada di dalam elemen responsif. Padding pada .videowrapper diperlukan untuk menjaga agar video tidak runtuh. Anda mungkin harus mengubah nomornya tergantung pada tata letak Anda.
sumber
56.25%
dan25px
dapat dibaca di alistapart.com/article/creating-intrinsic-ratios-for-videopadding-bottom: 56.25%
: Untuk membuat rasio 16: 9, kita harus membagi 9 dengan 16 (0,5625 atau 56,25%).padding-top: 25px
: Untuk menghindari masalah dengan model kotak rusak (IE5 atau IE6 dalam mode quirks), kami menggunakan padding-top daripada tinggi untuk menciptakan ruang bagi chrome.Jika Anda menggunakan Bootstrap, Anda juga dapat menggunakan embed yang responsif. Ini sepenuhnya otomatis akan membuat video menjadi responsif.
http://getbootstrap.com/components/#responsive-embed
Ada beberapa contoh kode di bawah ini.
sumber
col-sm-8 col-sm-offset-2
Saya menggunakan CSS dalam jawaban yang diterima di sini untuk video YouTube responsif saya - bekerja sangat baik hingga YouTube memperbarui sistem mereka sekitar awal Agustus 2015. Video di YouTube memiliki dimensi yang sama tetapi untuk alasan apa pun CSS dalam jawaban yang diterima sekarang kotak surat semua video kami. Pita hitam di bagian atas dan bawah.
Saya telah berkeliling dengan ukuran dan memutuskan untuk menyingkirkan bantalan atas dan mengubah bantalan bawah ke
56.45%
. Tampaknya terlihat bagus.sumber
Solusi Javascript yang disempurnakan untuk YouTube dan Vimeo menggunakan jQuery.
Mudah digunakan dengan hanya menyematkan:
Atau dengan kerangka gaya responsif seperti Bootstrap.
width="16" height="9"
)*=
pemilih substring jQuery alih-alih memulai string^=
Terima kasih kepada @Dampas untuk titik awal. https://stackoverflow.com/a/33354009/1011746
sumber
Ini adalah utas lama, tetapi saya telah menemukan jawaban baru di https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Masalah dengan solusi sebelumnya adalah bahwa Anda perlu memiliki div khusus di sekitar kode video, yang tidak cocok untuk sebagian besar penggunaan. Jadi di sini adalah solusi JavaScript tanpa div khusus.
sumber
Solusi @ magi182 solid, tetapi tidak memiliki kemampuan untuk mengatur lebar maksimum. Saya pikir lebar maksimum 640px diperlukan karena selain itu thumbnail youtube terlihat pixelated.
Solusi saya dengan dua pembungkus bekerja seperti pesona bagi saya:
Saya juga mengatur padding-bottom di bungkus dalam menjadi 50%, karena dengan 56% @ magi182, sebuah bar hitam di bagian atas dan bawah muncul.
sumber
Dengan kredit ke jawaban sebelumnya https://stackoverflow.com/a/36549068/7149454
Kompatibel Boostrap, sesuaikan lebar kontainer Anda (300px dalam contoh ini) dan Anda siap melakukannya:
sumber
Lihat inti lengkap di sini dan contoh langsung di sini .
resizeHeroVideo dipanggil hanya setelah pemutar Youtube dimuat penuh (pemuatan halaman tidak berfungsi), dan setiap kali jendela browser diubah ukurannya. Saat dijalankan, ia menghitung tinggi dan lebar iframe dan memberikan nilai yang sesuai dengan mempertahankan rasio aspek yang benar. Ini berfungsi baik jika jendela diubah ukurannya secara horizontal atau vertikal.
sumber
Oke, sepertinya solusi besar.
Mengapa tidak menambahkan
width: 100%;
langsung di iframe Anda. ;)Jadi kode Anda akan terlihat seperti ini
<iframe style="width: 100%;" ...></iframe>
Coba ini akan berhasil karena berfungsi dalam kasus saya.
Nikmati! :)
sumber
Saya membuat ini dengan css sederhana sebagai berikut
KODE HTML
KODE CSS
sumber