Kecilkan video YouTube hingga lebar responsif


125

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?


1
Sumber daya yang baik untuk menghasilkan kode sematan responsif Anda: embedresponsively.com
ThisClark

Jawaban:


268

Anda dapat membuat video YouTube responsif dengan CSS. Bungkus iframe dalam div dengan kelas "videowrapper" dan terapkan gaya berikut:

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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.


Terima kasih! Saya harus menambahkan lebar: 100% ke konten saya untuk memastikan itu adalah elemen responsif.
MattM


1
dalam kasus saya, video tidak muncul saat menerapkan CSS ini.
basZero

5
Penjelasan terperinci tentang nomor 56.25%dan 25pxdapat dibaca di alistapart.com/article/creating-intrinsic-ratios-for-video padding-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.
Tun


26

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.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

1
Perlu ditambahkan bahwa Anda harus memasukkan yang di dalam beberapa col-sm ... dll untuk menghindari membuat video penuh lebar.
subuh

Ini luar biasa
jastr

Juga, untuk menjaga video terpusat jangan lupa untuk menggunakan offset. Misalnya:col-sm-8 col-sm-offset-2
Nicolas

9

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.

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}

1
Hanya pembaruan tentang ini - kadang-kadang gambar placeholder lama yang digunakan pada video membuatnya terlihat seperti masih ada pita hitam di bagian atas dan bawah tetapi video itu sendiri terlihat bagus dengan pengaturan baru ini ketika Anda benar-benar mulai memutarnya. Grrr, terima kasih YouTube.
McNab

1
Terima kasih. Menggunakan padding-bottom: 50% menghilangkan bilah hitam atas dan bawah untuk video yang saya gunakan, walaupun tampaknya thumbnail dan video itu sendiri memiliki rasio aspek yang tidak cocok ...
MSC

8

Solusi Javascript yang disempurnakan untuk YouTube dan Vimeo menggunakan jQuery.

// -- After the document is ready
$(function() {
  // Find all YouTube and Vimeo videos
  var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']");

  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });

  // When the window is resized
  $(window).resize(function() {
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
      var $el = $(this);
      // Get parent width of this video
      var newWidth = $el.parent().width();
      $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));
    });

  // Kick off one resize to fix all videos on page load
  }).resize();
});

Mudah digunakan dengan hanya menyematkan:

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

Atau dengan kerangka gaya responsif seperti Bootstrap.

<div class="row">
  <div class="col-sm-6">
    Stroke Awareness
  <div class="col-sm-6>
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
  • Bergantung pada lebar dan tinggi iframe untuk mempertahankan rasio aspek
  • Dapat menggunakan rasio aspek untuk lebar dan tinggi ( width="16" height="9")
  • Tunggu hingga dokumen siap sebelum mengubah ukuran
  • Menggunakan *=pemilih substring jQuery alih-alih memulai string^=
  • Mendapat lebar referensi dari induk video iframe alih-alih elemen yang ditentukan sebelumnya
  • Solusi javascript
  • Tanpa CSS
  • Tidak perlu bungkus

Terima kasih kepada @Dampas untuk titik awal. https://stackoverflow.com/a/33354009/1011746


Bekerja dengan sempurna! Terima kasih banyak :)
Laran Evans

Ini membantu. Terutama dalam kasus di mana Anda tidak memiliki kontrol atas elemen HTML (tetapi JS) dan tidak dapat mengatur rekaman video. Terima kasih.
Kai Noack

Perhatikan bahwa solusi ini akan mengikat acara pengubahan ukuran dengan fungsi JavaScript, yang dapat memberi tekanan pada browser karena lebih banyak acara ditambahkan. Ingatlah bahwa Anda dapat menggunakan JavaScript untuk membungkus iframe dalam div pembungkus untuk membiarkan CSS menangani gaya responsif dan meningkatkan kinerja.
railgun

Saya sudah mencoba banyak solusi. Ini adalah solusi terbaik di Internet untuk membuat Video YouTube responsif.
Dan Nick

1

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.

// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!!
var $allVideos = $("iframe[src^='https://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

    $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

    var newWidth = $fluidEl.width();

    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {

        var $el = $(this);
        $el
        .width(newWidth)
        .height(newWidth * $el.data('aspectRatio'));

    });

// Kick off one resize to fix all videos on page load
}).resize();

// END RESIZE VIDEOS

1

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:

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Saya juga mengatur padding-bottom di bungkus dalam menjadi 50%, karena dengan 56% @ magi182, sebuah bar hitam di bagian atas dan bawah muncul.


Ini bekerja lebih baik untuk saya mencoba menanamkan video responsif, tetapi tentukan lebar (lebar-maks).
yougotiger

1

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:

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>

0

Lihat inti lengkap di sini dan contoh langsung di sini .

#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
            <div class="videoWrapper">
                 <div id="player"></div>
            </div>
            </center>
            <script>
            function onYouTubeIframeAPIReady() { 
                player = new YT.Player('player', {
                   videoId:'xxxxxxxxxxx',playerVars: {  controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
                } );
                resizeHeroVideo();
             }
             </script>
        </div>
    </div>
</div>

var player = null;
$( document ).ready(function() {
    resizeHeroVideo();
} );

$(window).resize(function() {
    resizeHeroVideo();
});

function resizeHeroVideo() {
    var content = $('#hero');
    var contentH = viewportSize.getHeight();
    contentH -= 158;
    content.css('height',contentH);

    if(player != null) {
        var iframe = $('.videoWrapper iframe');
        var iframeH = contentH - 150;
        if (isMobile) {
            iframeH = 163; 
        }
        iframe.css('height',iframeH);
        var iframeW = iframeH/9 * 16;
        iframe.css('width',iframeW);
    }
}

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.


-1

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! :)


5
Karena ini tidak mengubah ukuran ketinggian dengan benar untuk video, dan karena itu menunjukkan kontrol & strip hitam, jawaban yang diterima adalah solusi yang lebih baik
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

Karena ini adalah titik awal untuk membuat video responsif dengan iframe tertanam, saya percaya solusi ini menjawab pertanyaan dengan benar. Kombinasikan ini dengan sistem grid dan ketinggian adalah satu-satunya masalah yang tersisa. => (lebar kontainer / 12) * 9 = tinggi.
Tim Vermaelen

-2

Saya membuat ini dengan css sederhana sebagai berikut

KODE HTML

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>

KODE CSS

<style type="text/css">
#vid {

max-width: 100%;
height: auto;

}

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.