Kecilkan video YouTube hingga lebar responsif

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?

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.

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>

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;
}

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

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

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.

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>

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.

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

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;

}